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

csb added to form components

pull/1055/head
Tuğçe Küçükoğlu 2021-03-18 13:41:31 +03:00
parent 220421f8c5
commit b168e85e59
27 changed files with 7328 additions and 7449 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

830
src/views/autocomplete/AutoCompleteDoc.vue
View File

@ -1,16 +1,14 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="AutoCompleteDemo" :sources="sources" service="CountryService" data="countries">
<h5>Import</h5>
<pre v-code.script><code>
import AutoComplete from 'primevue/autocomplete';
</code></pre>
<h5>Getting Started</h5>
<p>AutoComplete uses v-model for two-way binding, requires a list of suggestions and a complete method to query for the results. The complete method
gets the query text as event.query property and should update the suggestions with the search results. Example below connects to a remote datasource to fetch the results;</p>
<h5>Getting Started</h5>
<p>AutoComplete uses v-model for two-way binding, requires a list of suggestions and a complete method to query for the results. The complete method
gets the query text as event.query property and should update the suggestions with the search results. Example below connects to a remote datasource to fetch the results;</p>
<pre v-code><code>
&lt;AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountry($event)" field="name" /&gt;
@ -36,34 +34,34 @@ export default {
</code></pre>
<h5>Dropdown</h5>
<p>Enabling <i>dropdown</i> property displays a button next to the input field where click behavior of the button is defined using
dropdownMode property that takes "blank" or "current" as possible values.
"blank" is the default mode to send a query with an empty string whereas
"current" setting sends a query with the current value of the input.</p>
<h5>Dropdown</h5>
<p>Enabling <i>dropdown</i> property displays a button next to the input field where click behavior of the button is defined using
dropdownMode property that takes "blank" or "current" as possible values.
"blank" is the default mode to send a query with an empty string whereas
"current" setting sends a query with the current value of the input.</p>
<pre v-code><code>
&lt;AutoComplete v-model="brand" :dropdown="true" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" /&gt;
</code></pre>
<h5>Multiple Mode</h5>
<p>Multiple mode is enabled using <i>multiple</i> property to select more than one value from the autocomplete. In this case, value reference should be an array.</p>
<h5>Multiple Mode</h5>
<p>Multiple mode is enabled using <i>multiple</i> property to select more than one value from the autocomplete. In this case, value reference should be an array.</p>
<pre v-code><code>
&lt;AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountriesMultiple" @complete="searchCountryMultiple($event)" field="name" /&gt;
</code></pre>
<h5>Objects</h5>
<p>AutoComplete can also work with objects using the <i>field</i> property that defines the label to display
as a suggestion. The value passed to the model would still be the object instance of a suggestion.
Here is an example with a Country object that has name and code fields such as &#123;name:"United States",code:"USA"&#125;.</p>
<h5>Objects</h5>
<p>AutoComplete can also work with objects using the <i>field</i> property that defines the label to display
as a suggestion. The value passed to the model would still be the object instance of a suggestion.
Here is an example with a Country object that has name and code fields such as &#123;name:"United States",code:"USA"&#125;.</p>
<pre v-code><code>
&lt;AutoComplete field="label" v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" /&gt;
</code></pre>
<h5>Grouping</h5>
<p>Options groups are specified with the <i>optionGroupLabel</i> and <i>optionGroupChildren</i> properties.</p>
<h5>Grouping</h5>
<p>Options groups are specified with the <i>optionGroupLabel</i> and <i>optionGroupChildren</i> properties.</p>
<pre v-code.script><code>
export default {
data() {
@ -107,17 +105,17 @@ export default {
</template>
</code></pre>
<h5>Force Selection</h5>
<p>ForceSelection mode validates the manual input to check whether it also exists in the suggestions list, if not the input value is cleared
to make sure the value passed to the model is always one of the suggestions. Simply enable <i>forceSelection</i> to enforce that input is always from the suggestion list.</p>
<h5>Force Selection</h5>
<p>ForceSelection mode validates the manual input to check whether it also exists in the suggestions list, if not the input value is cleared
to make sure the value passed to the model is always one of the suggestions. Simply enable <i>forceSelection</i> to enforce that input is always from the suggestion list.</p>
<pre v-code><code>
&lt;AutoComplete forceSelection v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" /&gt;
</code></pre>
<h5>Templating</h5>
<p>Item template allows displaying custom content inside the suggestions panel. The slotProps variable passed to the template provides an item property to represent an item in the suggestions collection.
In addition <i>optiongroup</i>, <i>header</i> and <i>footer</i> slots are provided for further customization</p>
<h5>Templating</h5>
<p>Item template allows displaying custom content inside the suggestions panel. The slotProps variable passed to the template provides an item property to represent an item in the suggestions collection.
In addition <i>optiongroup</i>, <i>header</i> and <i>footer</i> slots are provided for further customization</p>
<pre v-code><code><template v-pre>
&lt;AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true"&gt;
&lt;template #item="slotProps"&gt;
@ -128,412 +126,289 @@ export default {
</template>
</code></pre>
<h5>Properties</h5>
<p>Any property such as name and placeholder are passed to the underlying input element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>suggestions</td>
<td>array</td>
<td>null</td>
<td>An array of suggestions to display.</td>
</tr>
<tr>
<td>field</td>
<td>any</td>
<td>null</td>
<td>Property name or getter function of a suggested object to resolve and display.</td>
</tr>
<tr>
<td>optionGroupLabel</td>
<td>string</td>
<td>null</td>
<td>Property name or getter function to use as the label of an option group.</td>
</tr>
<tr>
<td>optionGroupChildren</td>
<td>string</td>
<td>null</td>
<td>Property name or getter function that refers to the children options of option group.</td>
</tr>
<tr>
<td>scrollHeight</td>
<td>string</td>
<td>200px</td>
<td>Maximum height of the suggestions panel.</td>
</tr>
<tr>
<td>dropdown</td>
<td>boolean</td>
<td>false</td>
<td>Displays a button next to the input field when enabled.</td>
</tr>
<tr>
<td>dropdownMode</td>
<td>string</td>
<td>blank</td>
<td>Specifies the behavior dropdown button. Default "blank" mode sends an empty string and "current" mode sends the input value.</td>
</tr>
<tr>
<td>multiple</td>
<td>boolean</td>
<td>false</td>
<td>Specifies if multiple values can be selected.</td>
</tr>
<tr>
<td>minLength</td>
<td>number</td>
<td>1</td>
<td>Minimum number of characters to initiate a search.</td>
</tr>
<tr>
<td>delay</td>
<td>number</td>
<td>300</td>
<td>Delay between keystrokes to wait before sending a query.</td>
</tr>
<tr>
<td>appendTo</td>
<td>string</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
</tr>
<tr>
<td>inputStyle</td>
<td>any</td>
<td>null</td>
<td>Inline style of the input field.</td>
</tr>
<tr>
<td>inputClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the input field.</td>
</tr>
<tr>
<td>forceSelection</td>
<td>boolean</td>
<td>false</td>
<td>When present, autocomplete clears the manual input if it does not match of the suggestions to force only
accepting values from the suggestions.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property such as name and placeholder are passed to the underlying input element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>suggestions</td>
<td>array</td>
<td>null</td>
<td>An array of suggestions to display.</td>
</tr>
<tr>
<td>field</td>
<td>any</td>
<td>null</td>
<td>Property name or getter function of a suggested object to resolve and display.</td>
</tr>
<tr>
<td>optionGroupLabel</td>
<td>string</td>
<td>null</td>
<td>Property name or getter function to use as the label of an option group.</td>
</tr>
<tr>
<td>optionGroupChildren</td>
<td>string</td>
<td>null</td>
<td>Property name or getter function that refers to the children options of option group.</td>
</tr>
<tr>
<td>scrollHeight</td>
<td>string</td>
<td>200px</td>
<td>Maximum height of the suggestions panel.</td>
</tr>
<tr>
<td>dropdown</td>
<td>boolean</td>
<td>false</td>
<td>Displays a button next to the input field when enabled.</td>
</tr>
<tr>
<td>dropdownMode</td>
<td>string</td>
<td>blank</td>
<td>Specifies the behavior dropdown button. Default "blank" mode sends an empty string and "current" mode sends the input value.</td>
</tr>
<tr>
<td>multiple</td>
<td>boolean</td>
<td>false</td>
<td>Specifies if multiple values can be selected.</td>
</tr>
<tr>
<td>minLength</td>
<td>number</td>
<td>1</td>
<td>Minimum number of characters to initiate a search.</td>
</tr>
<tr>
<td>delay</td>
<td>number</td>
<td>300</td>
<td>Delay between keystrokes to wait before sending a query.</td>
</tr>
<tr>
<td>appendTo</td>
<td>string</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
</tr>
<tr>
<td>inputStyle</td>
<td>any</td>
<td>null</td>
<td>Inline style of the input field.</td>
</tr>
<tr>
<td>inputClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the input field.</td>
</tr>
<tr>
<td>forceSelection</td>
<td>boolean</td>
<td>false</td>
<td>When present, autocomplete clears the manual input if it does not match of the suggestions to force only
accepting values from the suggestions.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<p>Any valid event such as focus, blur and input are passed to the underlying input element. Following are the additional events to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>complete</td>
<td>
event.originalEvent: Browser event <br />
event.query: Value to search with
</td>
<td>Callback to invoke to search for suggestions.</td>
</tr>
<tr>
<td>item-select</td>
<td>event.originalEvent: Browser event <br />
event.value: Selected item</td>
<td>Callback to invoke when a suggestion is selected.</td>
</tr>
<tr>
<td>item-unselect</td>
<td>event.originalEvent: Browser event <br />
event.value: Unselected item</td>
<td>Callback to invoke when a selected value is removed.</td>
</tr>
<tr>
<td>dropdown-click</td>
<td>
event.originalEvent: browser event <br />
event.query: Current value of the input field
</td>
<td>Callback to invoke to when dropdown button is clicked.</td>
</tr>
<tr>
<td>clear</td>
<td>event: Browser event</td>
<td>Callback to invoke when input is cleared by the user.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<p>Any valid event such as focus, blur and input are passed to the underlying input element. Following are the additional events to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>complete</td>
<td>
event.originalEvent: Browser event <br />
event.query: Value to search with
</td>
<td>Callback to invoke to search for suggestions.</td>
</tr>
<tr>
<td>item-select</td>
<td>event.originalEvent: Browser event <br />
event.value: Selected item</td>
<td>Callback to invoke when a suggestion is selected.</td>
</tr>
<tr>
<td>item-unselect</td>
<td>event.originalEvent: Browser event <br />
event.value: Unselected item</td>
<td>Callback to invoke when a selected value is removed.</td>
</tr>
<tr>
<td>dropdown-click</td>
<td>
event.originalEvent: browser event <br />
event.query: Current value of the input field
</td>
<td>Callback to invoke to when dropdown button is clicked.</td>
</tr>
<tr>
<td>clear</td>
<td>event: Browser event</td>
<td>Callback to invoke when input is cleared by the user.</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>item</td>
<td>item: Option instance <br />
index: Index of the option</td>
</tr>
<tr>
<td>optiongroup</td>
<td>item: OptionGroup instance <br />
index: Index of the option group</td>
</tr>
<tr>
<td>header</td>
<td>value: Value of the component <br />
suggestions: Displayed options</td>
</tr>
<tr>
<td>footer</td>
<td>value: Value of the component <br />
suggestions: Displayed options</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>item</td>
<td>item: Option instance <br />
index: Index of the option</td>
</tr>
<tr>
<td>optiongroup</td>
<td>item: OptionGroup instance <br />
index: Index of the option group</td>
</tr>
<tr>
<td>header</td>
<td>value: Value of the component <br />
suggestions: Displayed options</td>
</tr>
<tr>
<td>footer</td>
<td>value: Value of the component <br />
suggestions: Displayed options</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-autocomplete</td>
<td>Container element</td>
</tr>
<tr>
<td>p-autocomplete-panel</td>
<td>Overlay panel of suggestions.</td>
</tr>
<tr>
<td>p-autocomplete-items</td>
<td>List container of suggestions.</td>
</tr>
<tr>
<td>p-autocomplete-item</td>
<td>List item of a suggestion.</td>
</tr>
<tr>
<td>p-autocomplete-token</td>
<td>Element of a selected item in multiple mode.</td>
</tr>
<tr>
<td>p-autocomplete-token-icon</td>
<td>Close icon element of a selected item in multiple mode.</td>
</tr>
<tr>
<td>p-autocomplete-token-label</td>
<td>Label of a selected item in multiple mode.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-autocomplete</td>
<td>Container element</td>
</tr>
<tr>
<td>p-autocomplete-panel</td>
<td>Overlay panel of suggestions.</td>
</tr>
<tr>
<td>p-autocomplete-items</td>
<td>List container of suggestions.</td>
</tr>
<tr>
<td>p-autocomplete-item</td>
<td>List item of a suggestion.</td>
</tr>
<tr>
<td>p-autocomplete-token</td>
<td>Element of a selected item in multiple mode.</td>
</tr>
<tr>
<td>p-autocomplete-token-icon</td>
<td>Close icon element of a selected item in multiple mode.</td>
</tr>
<tr>
<td>p-autocomplete-token-label</td>
<td>Label of a selected item in multiple mode.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/autocomplete" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="AutoCompleteDemo" :sources="sources" service="CountryService" data="countries" />
</div>
<pre v-code><code><template v-pre>
&lt;h5&gt;Basic&lt;/h5&gt;
&lt;AutoComplete v-model="selectedCountry1" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" /&gt;
&lt;h5&gt;Grouped&lt;/h5&gt;
&lt;AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)" field="label" optionGroupLabel="label" optionGroupChildren="items"&gt;
&lt;template #optiongroup="slotProps"&gt;
&lt;div class="p-d-flex p-ai-center country-item"&gt;
&lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" width="18" /&gt;
&lt;div&gt;{{slotProps.item.label}}&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/AutoComplete&gt;
&lt;h5&gt;Dropdown, Templating and Force Selection&lt;/h5&gt;
&lt;AutoComplete v-model="selectedCountry2" :suggestions="filteredCountries" @complete="searchCountry($event)" :dropdown="true" field="name" forceSelection&gt;
&lt;template #item="slotProps"&gt;
&lt;div class="country-item"&gt;
&lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" /&gt;
&lt;div&gt;{{slotProps.item.name}}&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/AutoComplete&gt;
&lt;h5&gt;Multiple&lt;/h5&gt;
&lt;span class="p-fluid"&gt;
&lt;AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" /&gt;
&lt;/span&gt;
</template>
</code></pre>
<pre v-code.script><code>
import CountryService from '../../service/CountryService';
import {FilterService,FilterMatchMode} from 'primevue/api';
export default {
data() {
return {
countries: null,
selectedCountry1: null,
selectedCountry2: null,
selectedCity: null,
filteredCities: null,
filteredCountries: null,
selectedCountries: [],
groupedCities: [{
label: 'Germany', code: 'DE',
items: [
{label: 'Berlin', value: 'Berlin'},
{label: 'Frankfurt', value: 'Frankfurt'},
{label: 'Hamburg', value: 'Hamburg'},
{label: 'Munich', value: 'Munich'}
]
},
{
label: 'USA', code: 'US',
items: [
{label: 'Chicago', value: 'Chicago'},
{label: 'Los Angeles', value: 'Los Angeles'},
{label: 'New York', value: 'New York'},
{label: 'San Francisco', value: 'San Francisco'}
]
},
{
label: 'Japan', code: 'JP',
items: [
{label: 'Kyoto', value: 'Kyoto'},
{label: 'Osaka', value: 'Osaka'},
{label: 'Tokyo', value: 'Tokyo'},
{label: 'Yokohama', value: 'Yokohama'}
]
}]
}
},
countryService: null,
created() {
this.countryService = new CountryService();
},
mounted() {
this.countryService.getCountries().then(data => this.countries = data);
},
methods: {
searchCountry(event) {
setTimeout(() => {
if (!event.query.trim().length) {
this.filteredCountries = [...this.countries];
}
else {
this.filteredCountries = this.countries.filter((country) => {
return country.name.toLowerCase().startsWith(event.query.toLowerCase());
});
}
}, 250);
},
searchCity(event) {
let query = event.query;
let filteredCities = [];
for (let country of this.groupedCities) {
let filteredItems = FilterService.filter(country.items, ['label'], query, FilterMatchMode.CONTAINS);
if (filteredItems && filteredItems.length) {
filteredCities.push({...country, ...{items: filteredItems}});
}
}
this.filteredCities = filteredCities;
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources:{
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Basic</h5>
<AutoComplete v-model="selectedCountry1" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
'options-api': {
tabName: 'Source',
content:`
<template>
<div>
<div class="card">
<h5>Basic</h5>
<AutoComplete v-model="selectedCountry1" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
<h5>Grouped</h5>
<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)" field="label" optionGroupLabel="label" optionGroupChildren="items">
<template #optiongroup="slotProps">
<div class="p-d-flex p-ai-center country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
<div>{{slotProps.item.label}}</div>
</div>
</template>
</AutoComplete>
<h5>Grouped</h5>
<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)" field="label" optionGroupLabel="label" optionGroupChildren="items">
<template #optiongroup="slotProps">
<div class="p-d-flex p-ai-center country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
<div class="p-ml-2">{{slotProps.item.label}}</div>
</div>
</template>
</AutoComplete>
<h5>Dropdown, Templating and Force Selection</h5>
<AutoComplete v-model="selectedCountry2" :suggestions="filteredCountries" @complete="searchCountry($event)" :dropdown="true" field="name" forceSelection>
<template #item="slotProps">
<div class="country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
<div>{{slotProps.item.name}}</div>
</div>
</template>
</AutoComplete>
<h5>Dropdown, Templating and Force Selection</h5>
<AutoComplete v-model="selectedCountry2" :suggestions="filteredCountries" @complete="searchCountry($event)" :dropdown="true" field="name" forceSelection>
<template #item="slotProps">
<div class="country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
<div class="p-ml-2">{{slotProps.item.name}}</div>
</div>
</template>
</AutoComplete>
<h5>Multiple</h5>
<span class="p-fluid">
<AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
</span>
</div>
<h5>Multiple</h5>
<span class="p-fluid">
<AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
</span>
</div>
</div>
</template>
<script>
import CountryService from '../service/CountryService';
import CountryService from './service/CountryService';
import {FilterService,FilterMatchMode} from 'primevue/api';
export default {
@ -609,19 +484,130 @@ export default {
this.filteredCities = filteredCities;
}
}
}`,
style: `<style>
img {
width: 18px;
margin-right: 0.5rem;
}
</style>`
<\\/script>`
},
'composition-api': {
tabName: 'Composition API',
content:`
<template>
<div>
<div class="card">
<h5>Basic</h5>
<AutoComplete v-model="selectedCountry1" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
<h5>Grouped</h5>
<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)" field="label" optionGroupLabel="label" optionGroupChildren="items">
<template #optiongroup="slotProps">
<div class="p-d-flex p-ai-center country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
<div class="p-ml-2">{{slotProps.item.label}}</div>
</div>
</template>
</AutoComplete>
<h5>Dropdown, Templating and Force Selection</h5>
<AutoComplete v-model="selectedCountry2" :suggestions="filteredCountries" @complete="searchCountry($event)" :dropdown="true" field="name" forceSelection>
<template #item="slotProps">
<div class="country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
<div class="p-ml-2">{{slotProps.item.name}}</div>
</div>
</template>
</AutoComplete>
<h5>Multiple</h5>
<span class="p-fluid">
<AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
</span>
</div>
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
import CountryService from './service/CountryService';
import {FilterService,FilterMatchMode} from 'primevue/api';
export default {
setup() {
onMounted(() => {
countryService.value.getCountries().then(data => countries.value = data);
})
const countries = ref();
const countryService = ref(new CountryService());
const selectedCountry1 = ref();
const selectedCountry2 = ref();
const selectedCity = ref();
const filteredCities = ref();
const filteredCountries = ref();
const selectedCountries = ref([]);
const groupedCities = ref ([{
label: 'Germany', code: 'DE',
label: 'Germany', code: 'DE',
label: 'Germany', code: 'DE',
items: [
{label: 'Berlin', value: 'Berlin'},
{label: 'Frankfurt', value: 'Frankfurt'},
{label: 'Hamburg', value: 'Hamburg'},
{label: 'Munich', value: 'Munich'}
]
},
{
label: 'USA', code: 'US',
label: 'USA', code: 'US',
label: 'USA', code: 'US',
items: [
{label: 'Chicago', value: 'Chicago'},
{label: 'Los Angeles', value: 'Los Angeles'},
{label: 'New York', value: 'New York'},
{label: 'San Francisco', value: 'San Francisco'}
]
},
{
label: 'Japan', code: 'JP',
label: 'Japan', code: 'JP',
label: 'Japan', code: 'JP',
items: [
{label: 'Kyoto', value: 'Kyoto'},
{label: 'Osaka', value: 'Osaka'},
{label: 'Tokyo', value: 'Tokyo'},
{label: 'Yokohama', value: 'Yokohama'}
]
}]);
const searchCountry = (event) => {
setTimeout(() => {
if (!event.query.trim().length) {
filteredCountries.value = [...countries.value];
}
else {
filteredCountries.value = countries.value.filter((country) => {
return country.name.toLowerCase().startsWith(event.query.toLowerCase());
});
}
}, 250);
};
const searchCity = (event) => {
let query = event.query;
let filteredCities = [];
for (let country of groupedCities.value) {
let filteredItems = FilterService.filter(country.items, ['label'], query, FilterMatchMode.CONTAINS);
if (filteredItems && filteredItems.length) {
filteredCities.push({...country, ...{items: filteredItems}});
}
}
filteredCities.value = filteredCities;
}
return { countries, countryService, selectedCountry1, selectedCountry2, selectedCity, filteredCities, filteredCountries, selectedCountries, groupedCities, searchCountry, searchCity }
}
}
<\\/script>`
}
}
}
},
components: {
LiveEditor
}
}
</script>

800
src/views/button/ButtonDoc.vue
View File

@ -1,52 +1,50 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="ButtonDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import Button from 'primevue/button';
</code></pre>
<h5>Getting Started</h5>
<p>Button is created using the Button element.</p>
<h5>Getting Started</h5>
<p>Button is created using the Button element.</p>
<pre v-code><code>
&lt;Button /&gt;
</code></pre>
<h5>Label</h5>
<p>Text of the button is defined using the <i>label</i> property.</p>
<h5>Label</h5>
<p>Text of the button is defined using the <i>label</i> property.</p>
<pre v-code><code>
&lt;Button label="Submit" /&gt;
</code></pre>
<h5>Icons</h5>
<p>Icon on a button is specified with <i>icon</i> property and position is configured using <i>iconPos</i> attribute. Default
icon position is "left" and alternative is "right". To display only an icon, leave the label as undefined.</p>
<h5>Icons</h5>
<p>Icon on a button is specified with <i>icon</i> property and position is configured using <i>iconPos</i> attribute. Default
icon position is "left" and alternative is "right". To display only an icon, leave the label as undefined.</p>
<pre v-code><code>
&lt;Button label="Submit" icon="pi pi-check" iconPos="right" /&gt;
</code></pre>
<h5>Events</h5>
<p>Events are defined with the standard notation.</p>
<h5>Events</h5>
<p>Events are defined with the standard notation.</p>
<pre v-code><code>
&lt;Button label="Submit" @click="handleClick($event)"/&gt;
</code></pre>
<h5>Severity</h5>
<p>Different options are available as severity levels.</p>
<h5>Severity</h5>
<p>Different options are available as severity levels.</p>
<ul>
<li>.p-button-secondary</li>
<li>.p-button-success</li>
<li>.p-button-info</li>
<li>.p-button-warning</li>
<li>.p-button-help</li>
<li>.p-button-danger</li>
</ul>
<ul>
<li>.p-button-secondary</li>
<li>.p-button-success</li>
<li>.p-button-info</li>
<li>.p-button-warning</li>
<li>.p-button-help</li>
<li>.p-button-danger</li>
</ul>
<pre v-code><code>
&lt;Button label="Primary" /&gt;
@ -59,9 +57,9 @@ import Button from 'primevue/button';
</code></pre>
<h5>Text Buttons</h5>
<p>Text buttons have transparent background and borders, use <i>p-button-text</i> to apply text button styling. In addition when used with <i>.p-button-plain</i>
text buttons ignore severity levels and displayed as a regular text.</p>
<h5>Text Buttons</h5>
<p>Text buttons have transparent background and borders, use <i>p-button-text</i> to apply text button styling. In addition when used with <i>.p-button-plain</i>
text buttons ignore severity levels and displayed as a regular text.</p>
<pre v-code><code>
&lt;Button label="Submit" class="p-button-text" /&gt;
&lt;Button icon="pi pi-check" class="p-button-text" /&gt;
@ -70,29 +68,29 @@ import Button from 'primevue/button';
</code></pre>
<h5>Raised and Rounded Buttons</h5>
<p>A button can be raised by having "p-button-raised" style class and similarly borders can be made rounded using "p-button-rounded" class.</p>
<h5>Raised and Rounded Buttons</h5>
<p>A button can be raised by having "p-button-raised" style class and similarly borders can be made rounded using "p-button-rounded" class.</p>
<pre v-code><code>
&lt;Button label="Primary" class="p-button-raised p-button-rounded" /&gt;
</code></pre>
<h5>Outlined Buttons</h5>
<p>An alternate styling for a button is the outlined option where background becomes transparent. Apply "p-button-outlined" to style a button as outlined.</p>
<h5>Outlined Buttons</h5>
<p>An alternate styling for a button is the outlined option where background becomes transparent. Apply "p-button-outlined" to style a button as outlined.</p>
<pre v-code><code>
&lt;Button label="Primary" class="p-button-outlined" /&gt;
</code></pre>
<h5>Link Buttons</h5>
<p>Use "p-button-link" class to render the button as a link.</p>
<h5>Link Buttons</h5>
<p>Use "p-button-link" class to render the button as a link.</p>
<pre v-code><code>
&lt;Button label="Link" class="p-button-link" /&gt;
</code></pre>
<h5>Badges</h5>
<p>Badge is a small status indicator for a button. Refer to the <router-link to="/badge">badge</router-link> documentation for available styling options.</p>
<h5>Badges</h5>
<p>Badge is a small status indicator for a button. Refer to the <router-link to="/badge">badge</router-link> documentation for available styling options.</p>
<pre v-code><code>
&lt;Button type="button" label="Emails" badge="8" /&gt;
@ -100,8 +98,8 @@ import Button from 'primevue/button';
</code></pre>
<h5>ButtonSet</h5>
<p>Wrapping the buttons in a container having a <i>.p-buttonset</i> class, groups the buttons side to side.</p>
<h5>ButtonSet</h5>
<p>Wrapping the buttons in a container having a <i>.p-buttonset</i> class, groups the buttons side to side.</p>
<pre v-code><code>
&lt;span class="p-buttonset"&gt;
&lt;Button label="Save" icon="pi pi-check" /&gt;
@ -111,9 +109,9 @@ import Button from 'primevue/button';
</code></pre>
<h5>Sizes</h5>
<p>2 more sizes are available in addition to a regular button, for a smaller input add <i>p-button-sm</i> and for a larger one, use <i>p-button-lg</i>.
Note that these classes available to change the size of a particular button, for global scaling see the <router-link to="/theming">theming</router-link> page.</p>
<h5>Sizes</h5>
<p>2 more sizes are available in addition to a regular button, for a smaller input add <i>p-button-sm</i> and for a larger one, use <i>p-button-lg</i>.
Note that these classes available to change the size of a particular button, for global scaling see the <router-link to="/theming">theming</router-link> page.</p>
<pre v-code><code>
&lt;Button label="Small" icon="pi pi-check" class="p-button-sm" /&gt;
&lt;Button label="Normal" icon="pi pi-check" class="p-button" /&gt;
@ -121,8 +119,8 @@ import Button from 'primevue/button';
</code></pre>
<h5>Slot</h5>
<p>Custom content can be placed inside the button via the default slot. Note that when slot is used, label, icon and badge properties are not included.</p>
<h5>Slot</h5>
<p>Custom content can be placed inside the button via the default slot. Note that when slot is used, label, icon and badge properties are not included.</p>
<pre v-code><code>
&lt;Button&gt;
Custom Content
@ -130,367 +128,433 @@ import Button from 'primevue/button';
</code></pre>
<h5>Properties</h5>
<p>Any property such as style and class are passed to the underlying button element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>label</td>
<td>string</td>
<td>null</td>
<td>Text of the button.</td>
</tr>
<tr>
<td>icon</td>
<td>string</td>
<td>null</td>
<td>Name of the icon.</td>
</tr>
<tr>
<td>iconPos</td>
<td>string</td>
<td>left</td>
<td>Position of the icon, valid values are "left", "right", "bottom" and "top".</td>
</tr>
<tr>
<td>badge</td>
<td>string</td>
<td>null</td>
<td>Value of the badge.</td>
</tr>
<tr>
<td>badgeClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the badge.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property such as style and class are passed to the underlying button element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>label</td>
<td>string</td>
<td>null</td>
<td>Text of the button.</td>
</tr>
<tr>
<td>icon</td>
<td>string</td>
<td>null</td>
<td>Name of the icon.</td>
</tr>
<tr>
<td>iconPos</td>
<td>string</td>
<td>left</td>
<td>Position of the icon, valid values are "left", "right", "bottom" and "top".</td>
</tr>
<tr>
<td>badge</td>
<td>string</td>
<td>null</td>
<td>Value of the badge.</td>
</tr>
<tr>
<td>badgeClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the badge.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-button</td>
<td>Button element</td>
</tr>
<tr>
<td>p-button-icon</td>
<td>Icon element</td>
</tr>
<tr>
<td>p-button-label</td>
<td>Label element of the button</td>
</tr>
<tr>
<td>p-button-sm</td>
<td>Smaller button element</td>
</tr>
<tr>
<td>p-button-lg</td>
<td>Larger button element</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-button</td>
<td>Button element</td>
</tr>
<tr>
<td>p-button-icon</td>
<td>Icon element</td>
</tr>
<tr>
<td>p-button-label</td>
<td>Label element of the button</td>
</tr>
<tr>
<td>p-button-sm</td>
<td>Smaller button element</td>
</tr>
<tr>
<td>p-button-lg</td>
<td>Larger button element</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/button" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="ButtonDemo" :sources="sources"/>
</div>
<pre v-code><code><template v-pre>
&lt;h5&gt;Basic&lt;/h5&gt;
&lt;Button label="Submit" /&gt;
&lt;Button label="Disabled" disabled="disabled" /&gt;
&lt;Button label="Link" class="p-button-link" /&gt;
&lt;h5&gt;Icons&lt;/h5&gt;
&lt;Button icon="pi pi-check" /&gt;
&lt;Button label="Submit" icon="pi pi-check" /&gt;
&lt;Button label="Submit" icon="pi pi-check" iconPos="right" /&gt;
&lt;h5&gt;Severities&lt;/h5&gt;
&lt;Button label="Primary" /&gt;
&lt;Button label="Secondary" class="p-button-secondary" /&gt;
&lt;Button label="Success" class="p-button-success" /&gt;
&lt;Button label="Info" class="p-button-info" /&gt;
&lt;Button label="Warning" class="p-button-warning" /&gt;
&lt;Button label="Help" class="p-button-help" /&gt;
&lt;Button label="Danger" class="p-button-danger" /&gt;
&lt;h5&gt;Raised Buttons&lt;/h5&gt;
&lt;Button label="Primary" class="p-button-raised" /&gt;
&lt;Button label="Secondary" class="p-button-raised p-button-secondary" /&gt;
&lt;Button label="Success" class="p-button-raised p-button-success" /&gt;
&lt;Button label="Info" class="p-button-raised p-button-info" /&gt;
&lt;Button label="Warning" class="p-button-raised p-button-warning" /&gt;
&lt;Button label="Help" class="p-button-raised p-button-help" /&gt;
&lt;Button label="Danger" class="p-button-raised p-button-danger" /&gt;
&lt;h5&gt;Rounded Buttons&lt;/h5&gt;
&lt;Button label="Primary" class="p-button-rounded" /&gt;
&lt;Button label="Secondary" class="p-button-rounded p-button-secondary" /&gt;
&lt;Button label="Success" class="p-button-rounded p-button-success" /&gt;
&lt;Button label="Info" class="p-button-rounded p-button-info" /&gt;
&lt;Button label="Warning" class="p-button-rounded p-button-warning" /&gt;
&lt;Button label="Help" class="p-button-rounded p-button-help" /&gt;
&lt;Button label="Danger" class="p-button-rounded p-button-danger" /&gt;
&lt;h5&gt;Text Buttons&lt;/h5&gt;
&lt;Button label="Primary" class="p-button-text" /&gt;
&lt;Button label="Secondary" class="p-button-secondary p-button-text" /&gt;
&lt;Button label="Success" class="p-button-success p-button-text" /&gt;
&lt;Button label="Info" class="p-button-info p-button-text" /&gt;
&lt;Button label="Warning" class="p-button-warning p-button-text" /&gt;
&lt;Button label="Help" class="p-button-help p-button-text" /&gt;
&lt;Button label="Danger" class="p-button-danger p-button-text" /&gt;
&lt;Button label="Plain" class="p-button-text p-button-plain" /&gt;
&lt;h5&gt;Raised Text Buttons&lt;/h5&gt;
&lt;Button label="Primary" class="p-button-raised p-button-text" /&gt;
&lt;Button label="Secondary" class="p-button-raised p-button-secondary p-button-text" /&gt;
&lt;Button label="Success" class="p-button-raised p-button-success p-button-text" /&gt;
&lt;Button label="Info" class="p-button-raised p-button-info p-button-text" /&gt;
&lt;Button label="Warning" class="p-button-raised p-button-warning p-button-text" /&gt;
&lt;Button label="Help" class="p-button-raised p-button-help p-button-text" /&gt;
&lt;Button label="Danger" class="p-button-raised p-button-danger p-button-text" /&gt;
&lt;Button label="Plain" class="p-button-raised p-button-text p-button-plain" /&gt;
&lt;h5&gt;Outlined Buttons&lt;/h5&gt;
&lt;Button label="Primary" class="p-button-outlined" /&gt;
&lt;Button label="Secondary" class="p-button-outlined p-button-secondary" /&gt;
&lt;Button label="Success" class="p-button-outlined p-button-success" /&gt;
&lt;Button label="Info" class="p-button-outlined p-button-info" /&gt;
&lt;Button label="Warning" class="p-button-outlined p-button-warning" /&gt;
&lt;Button label="Help" class="p-button-outlined p-button-help" /&gt;
&lt;Button label="Danger" class="p-button-outlined p-button-danger" /&gt;
&lt;h5&gt;Rounded Icon Buttons&lt;/h5&gt;
&lt;Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" /&gt;
&lt;Button icon="pi pi-search" class="p-button-rounded p-button-success" /&gt;
&lt;Button icon="pi pi-user" class="p-button-rounded p-button-info" /&gt;
&lt;Button icon="pi pi-bell" class="p-button-rounded p-button-warning" /&gt;
&lt;Button icon="pi pi-heart" class="p-button-rounded p-button-help" /&gt;
&lt;Button icon="pi pi-times" class="p-button-rounded p-button-danger" /&gt;
&lt;Button icon="pi pi-check" class="p-button-rounded" /&gt;
&lt;h5&gt;Rounded Text Icon Buttons&lt;/h5&gt;
&lt;Button icon="pi pi-check" class="p-button-rounded p-button-text" /&gt;
&lt;Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text" /&gt;
&lt;Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text" /&gt;
&lt;Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text" /&gt;
&lt;Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text" /&gt;
&lt;Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text" /&gt;
&lt;Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" /&gt;
&lt;Button icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain" /&gt;
&lt;h5&gt;Rounded and Outlined Icon Buttons&lt;/h5&gt;
&lt;Button icon="pi pi-check" class="p-button-rounded p-button-outlined" /&gt;
&lt;Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined" /&gt;
&lt;Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined" /&gt;
&lt;Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined" /&gt;
&lt;Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined" /&gt;
&lt;Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined" /&gt;
&lt;Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined" /&gt;
&lt;h5&gt;Badges&lt;/h5&gt;
&lt;Button type="button" label="Emails" badge="8" /&gt;
&lt;Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" /&gt;
&lt;h5&gt;Button Set&lt;/h5&gt;
&lt;span class="p-buttonset"&gt;
&lt;Button label="Save" icon="pi pi-check" /&gt;
&lt;Button label="Delete" icon="pi pi-trash" /&gt;
&lt;Button label="Cancel" icon="pi pi-times" /&gt;
&lt;/span&gt;
&lt;h5&gt;Sizes&lt;/h5&gt;
&lt;div class="sizes"&gt;
&lt;Button label="Small" icon="pi pi-check" class="p-button-sm" /&gt;
&lt;Button label="Normal" icon="pi pi-check" class="p-button" /&gt;
&lt;Button label="Large" icon="pi pi-check" class="p-button-lg" /&gt;
&lt;/div&gt;
</template>
</code></pre>
<pre v-code.css><code>
button {
margin-right: .5rem;
}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Basic</h5>
<Button label="Submit" />
<Button label="Disabled" disabled="disabled" />
<Button label="Link" class="p-button-link" />
'options-api': {
tabName: 'Source',
content: `
<template>
<div>
<div class="card">
<h5>Basic</h5>
<Button label="Submit" />
<Button label="Disabled" disabled="disabled" />
<Button label="Link" class="p-button-link" />
<h5>Icons</h5>
<Button icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" iconPos="right" />
<h5>Icons</h5>
<Button icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" iconPos="right" />
<h5>Severities</h5>
<Button label="Primary" />
<Button label="Secondary" class="p-button-secondary" />
<Button label="Success" class="p-button-success" />
<Button label="Info" class="p-button-info" />
<Button label="Warning" class="p-button-warning" />
<Button label="Help" class="p-button-help" />
<Button label="Danger" class="p-button-danger" />
<h5>Severities</h5>
<Button label="Primary" />
<Button label="Secondary" class="p-button-secondary" />
<Button label="Success" class="p-button-success" />
<Button label="Info" class="p-button-info" />
<Button label="Warning" class="p-button-warning" />
<Button label="Help" class="p-button-help" />
<Button label="Danger" class="p-button-danger" />
<h5>Raised Buttons</h5>
<Button label="Primary" class="p-button-raised" />
<Button label="Secondary" class="p-button-raised p-button-secondary" />
<Button label="Success" class="p-button-raised p-button-success" />
<Button label="Info" class="p-button-raised p-button-info" />
<Button label="Warning" class="p-button-raised p-button-warning" />
<Button label="Help" class="p-button-raised p-button-help" />
<Button label="Danger" class="p-button-raised p-button-danger" />
<h5>Raised Buttons</h5>
<Button label="Primary" class="p-button-raised" />
<Button label="Secondary" class="p-button-raised p-button-secondary" />
<Button label="Success" class="p-button-raised p-button-success" />
<Button label="Info" class="p-button-raised p-button-info" />
<Button label="Warning" class="p-button-raised p-button-warning" />
<Button label="Help" class="p-button-raised p-button-help" />
<Button label="Danger" class="p-button-raised p-button-danger" />
<h5>Rounded Buttons</h5>
<Button label="Primary" class="p-button-rounded" />
<Button label="Secondary" class="p-button-rounded p-button-secondary" />
<Button label="Success" class="p-button-rounded p-button-success" />
<Button label="Info" class="p-button-rounded p-button-info" />
<Button label="Warning" class="p-button-rounded p-button-warning" />
<Button label="Help" class="p-button-rounded p-button-help" />
<Button label="Danger" class="p-button-rounded p-button-danger" />
<h5>Rounded Buttons</h5>
<Button label="Primary" class="p-button-rounded" />
<Button label="Secondary" class="p-button-rounded p-button-secondary" />
<Button label="Success" class="p-button-rounded p-button-success" />
<Button label="Info" class="p-button-rounded p-button-info" />
<Button label="Warning" class="p-button-rounded p-button-warning" />
<Button label="Help" class="p-button-rounded p-button-help" />
<Button label="Danger" class="p-button-rounded p-button-danger" />
<h5>Text Buttons</h5>
<Button label="Primary" class="p-button-text" />
<Button label="Secondary" class="p-button-secondary p-button-text" />
<Button label="Success" class="p-button-success p-button-text" />
<Button label="Info" class="p-button-info p-button-text" />
<Button label="Warning" class="p-button-warning p-button-text" />
<Button label="Help" class="p-button-help p-button-text" />
<Button label="Danger" class="p-button-danger p-button-text" />
<Button label="Plain" class="p-button-text p-button-plain" />
<h5>Text Buttons</h5>
<Button label="Primary" class="p-button-text" />
<Button label="Secondary" class="p-button-secondary p-button-text" />
<Button label="Success" class="p-button-success p-button-text" />
<Button label="Info" class="p-button-info p-button-text" />
<Button label="Warning" class="p-button-warning p-button-text" />
<Button label="Help" class="p-button-help p-button-text" />
<Button label="Danger" class="p-button-danger p-button-text" />
<Button label="Plain" class="p-button-text p-button-plain" />
<h5>Raised Text Buttons</h5>
<Button label="Primary" class="p-button-raised p-button-text" />
<Button label="Secondary" class="p-button-raised p-button-secondary p-button-text" />
<Button label="Success" class="p-button-raised p-button-success p-button-text" />
<Button label="Info" class="p-button-raised p-button-info p-button-text" />
<Button label="Warning" class="p-button-raised p-button-warning p-button-text" />
<Button label="Help" class="p-button-raised p-button-help p-button-text" />
<Button label="Danger" class="p-button-raised p-button-danger p-button-text" />
<Button label="Plain" class="p-button-raised p-button-text p-button-plain" />
<h5>Raised Text Buttons</h5>
<Button label="Primary" class="p-button-raised p-button-text" />
<Button label="Secondary" class="p-button-raised p-button-secondary p-button-text" />
<Button label="Success" class="p-button-raised p-button-success p-button-text" />
<Button label="Info" class="p-button-raised p-button-info p-button-text" />
<Button label="Warning" class="p-button-raised p-button-warning p-button-text" />
<Button label="Help" class="p-button-raised p-button-help p-button-text" />
<Button label="Danger" class="p-button-raised p-button-danger p-button-text" />
<Button label="Plain" class="p-button-raised p-button-text p-button-plain" />
<h5>Outlined Buttons</h5>
<Button label="Primary" class="p-button-outlined" />
<Button label="Secondary" class="p-button-outlined p-button-secondary" />
<Button label="Success" class="p-button-outlined p-button-success" />
<Button label="Info" class="p-button-outlined p-button-info" />
<Button label="Warning" class="p-button-outlined p-button-warning" />
<Button label="Help" class="p-button-outlined p-button-help" />
<Button label="Danger" class="p-button-outlined p-button-danger" />
<h5>Outlined Buttons</h5>
<Button label="Primary" class="p-button-outlined" />
<Button label="Secondary" class="p-button-outlined p-button-secondary" />
<Button label="Success" class="p-button-outlined p-button-success" />
<Button label="Info" class="p-button-outlined p-button-info" />
<Button label="Warning" class="p-button-outlined p-button-warning" />
<Button label="Help" class="p-button-outlined p-button-help" />
<Button label="Danger" class="p-button-outlined p-button-danger" />
<h5>Rounded Icon Buttons</h5>
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" />
<Button icon="pi pi-search" class="p-button-rounded p-button-success" />
<Button icon="pi pi-user" class="p-button-rounded p-button-info" />
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning" />
<Button icon="pi pi-heart" class="p-button-rounded p-button-help" />
<Button icon="pi pi-times" class="p-button-rounded p-button-danger" />
<Button icon="pi pi-check" class="p-button-rounded" />
<h5>Rounded Icon Buttons</h5>
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" />
<Button icon="pi pi-search" class="p-button-rounded p-button-success" />
<Button icon="pi pi-user" class="p-button-rounded p-button-info" />
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning" />
<Button icon="pi pi-heart" class="p-button-rounded p-button-help" />
<Button icon="pi pi-times" class="p-button-rounded p-button-danger" />
<Button icon="pi pi-check" class="p-button-rounded" />
<h5>Rounded Text Icon Buttons</h5>
<Button icon="pi pi-check" class="p-button-rounded p-button-text" />
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text" />
<Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text" />
<Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text" />
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text" />
<Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text" />
<Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" />
<Button icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain" />
<h5>Rounded Text Icon Buttons</h5>
<Button icon="pi pi-check" class="p-button-rounded p-button-text" />
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text" />
<Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text" />
<Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text" />
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text" />
<Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text" />
<Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" />
<Button icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain" />
<h5>Rounded and Outlined Icon Buttons</h5>
<Button icon="pi pi-check" class="p-button-rounded p-button-outlined" />
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined" />
<Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined" />
<Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined" />
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined" />
<Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined" />
<Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined" />
<h5>Rounded and Outlined Icon Buttons</h5>
<Button icon="pi pi-check" class="p-button-rounded p-button-outlined" />
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined" />
<Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined" />
<Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined" />
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined" />
<Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined" />
<Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined" />
<h5>Badges</h5>
<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
<h5>Badges</h5>
<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
<h5>Button Set</h5>
<span class="p-buttonset">
<Button label="Save" icon="pi pi-check" />
<Button label="Delete" icon="pi pi-trash" />
<Button label="Cancel" icon="pi pi-times" />
</span>
<h5>Button Set</h5>
<span class="p-buttonset">
<Button label="Save" icon="pi pi-check" />
<Button label="Delete" icon="pi pi-trash" />
<Button label="Cancel" icon="pi pi-times" />
</span>
<h5>Sizes</h5>
<div class="sizes">
<Button label="Small" icon="pi pi-check" class="p-button-sm" />
<Button label="Normal" icon="pi pi-check" class="p-button" />
<Button label="Large" icon="pi pi-check" class="p-button-lg" />
</div>
<h5>Sizes</h5>
<div class="sizes">
<Button label="Small" icon="pi pi-check" class="p-button-sm" />
<Button label="Normal" icon="pi pi-check" class="p-button" />
<Button label="Large" icon="pi pi-check" class="p-button-lg" />
</div>
</div>
</div>
</template>
<script>
export default{}
`,
style: `<style>
export default {
}
<\\/script>
<style lang="scss" scoped>
.p-button {
margin-right: .5rem;
margin-bottom: .5rem;
}
.p-buttonset {
.p-button {
margin-right: 0;
}
}
.sizes {
.button {
margin-bottom: .5rem;
display: block;
&:last-child {
margin-bottom: 0;
}
}
}
@media screen and (max-width: 960px) {
.p-button {
margin-bottom: .5rem;
&:not(.p-button-icon-only) {
display: flex;
width: 100%;
}
}
.p-buttonset {
.p-button {
margin-bottom: 0;
}
}
}
</style>`
}
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div>
<div class="card">
<h5>Basic</h5>
<Button label="Submit" />
<Button label="Disabled" disabled="disabled" />
<Button label="Link" class="p-button-link" />
<h5>Icons</h5>
<Button icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" iconPos="right" />
<h5>Severities</h5>
<Button label="Primary" />
<Button label="Secondary" class="p-button-secondary" />
<Button label="Success" class="p-button-success" />
<Button label="Info" class="p-button-info" />
<Button label="Warning" class="p-button-warning" />
<Button label="Help" class="p-button-help" />
<Button label="Danger" class="p-button-danger" />
<h5>Raised Buttons</h5>
<Button label="Primary" class="p-button-raised" />
<Button label="Secondary" class="p-button-raised p-button-secondary" />
<Button label="Success" class="p-button-raised p-button-success" />
<Button label="Info" class="p-button-raised p-button-info" />
<Button label="Warning" class="p-button-raised p-button-warning" />
<Button label="Help" class="p-button-raised p-button-help" />
<Button label="Danger" class="p-button-raised p-button-danger" />
<h5>Rounded Buttons</h5>
<Button label="Primary" class="p-button-rounded" />
<Button label="Secondary" class="p-button-rounded p-button-secondary" />
<Button label="Success" class="p-button-rounded p-button-success" />
<Button label="Info" class="p-button-rounded p-button-info" />
<Button label="Warning" class="p-button-rounded p-button-warning" />
<Button label="Help" class="p-button-rounded p-button-help" />
<Button label="Danger" class="p-button-rounded p-button-danger" />
<h5>Text Buttons</h5>
<Button label="Primary" class="p-button-text" />
<Button label="Secondary" class="p-button-secondary p-button-text" />
<Button label="Success" class="p-button-success p-button-text" />
<Button label="Info" class="p-button-info p-button-text" />
<Button label="Warning" class="p-button-warning p-button-text" />
<Button label="Help" class="p-button-help p-button-text" />
<Button label="Danger" class="p-button-danger p-button-text" />
<Button label="Plain" class="p-button-text p-button-plain" />
<h5>Raised Text Buttons</h5>
<Button label="Primary" class="p-button-raised p-button-text" />
<Button label="Secondary" class="p-button-raised p-button-secondary p-button-text" />
<Button label="Success" class="p-button-raised p-button-success p-button-text" />
<Button label="Info" class="p-button-raised p-button-info p-button-text" />
<Button label="Warning" class="p-button-raised p-button-warning p-button-text" />
<Button label="Help" class="p-button-raised p-button-help p-button-text" />
<Button label="Danger" class="p-button-raised p-button-danger p-button-text" />
<Button label="Plain" class="p-button-raised p-button-text p-button-plain" />
<h5>Outlined Buttons</h5>
<Button label="Primary" class="p-button-outlined" />
<Button label="Secondary" class="p-button-outlined p-button-secondary" />
<Button label="Success" class="p-button-outlined p-button-success" />
<Button label="Info" class="p-button-outlined p-button-info" />
<Button label="Warning" class="p-button-outlined p-button-warning" />
<Button label="Help" class="p-button-outlined p-button-help" />
<Button label="Danger" class="p-button-outlined p-button-danger" />
<h5>Rounded Icon Buttons</h5>
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" />
<Button icon="pi pi-search" class="p-button-rounded p-button-success" />
<Button icon="pi pi-user" class="p-button-rounded p-button-info" />
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning" />
<Button icon="pi pi-heart" class="p-button-rounded p-button-help" />
<Button icon="pi pi-times" class="p-button-rounded p-button-danger" />
<Button icon="pi pi-check" class="p-button-rounded" />
<h5>Rounded Text Icon Buttons</h5>
<Button icon="pi pi-check" class="p-button-rounded p-button-text" />
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text" />
<Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text" />
<Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text" />
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text" />
<Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text" />
<Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" />
<Button icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain" />
<h5>Rounded and Outlined Icon Buttons</h5>
<Button icon="pi pi-check" class="p-button-rounded p-button-outlined" />
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined" />
<Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined" />
<Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined" />
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined" />
<Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined" />
<Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined" />
<h5>Badges</h5>
<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
<h5>Button Set</h5>
<span class="p-buttonset">
<Button label="Save" icon="pi pi-check" />
<Button label="Delete" icon="pi pi-trash" />
<Button label="Cancel" icon="pi pi-times" />
</span>
<h5>Sizes</h5>
<div class="sizes">
<Button label="Small" icon="pi pi-check" class="p-button-sm" />
<Button label="Normal" icon="pi pi-check" class="p-button" />
<Button label="Large" icon="pi pi-check" class="p-button-lg" />
</div>
</div>
</div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({});
<\\/script>
<style lang="scss" scoped>
.p-button {
margin-right: .5rem;
}
.p-buttonset {
.p-button {
margin-right: 0;
}
}
.sizes {
.button {
margin-bottom: .5rem;
display: block;
&:last-child {
margin-bottom: 0;
}
}
}
@media screen and (max-width: 960px) {
.p-button {
margin-bottom: .5rem;
&:not(.p-button-icon-only) {
display: flex;
width: 100%;
}
}
.p-buttonset {
.p-button {
margin-bottom: 0;
}
}
}
</style>`
},
}
}
},
components: {
LiveEditor
}
}
</script>

1354
src/views/calendar/CalendarDoc.vue
View File

File diff suppressed because it is too large Load Diff

718
src/views/cascadeselect/CascadeSelectDoc.vue
View File

@ -1,17 +1,15 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="CascadeSelectDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import CascadeSelect from 'primevue/cascadeselect';
</code></pre>
<h5>Getting Started</h5>
<p>CascadeSelect requires a value to bind and a collection of arbitrary objects with a nested hierarchy. <i>optionGroupLabel</i>
is used for the text of a category and <i>optionGroupChildren</i> is to define the children of the category. Note that order of the <i>optionGroupChildren</i>
matters and it should correspond to the data hierarchy.</p>
<h5>Getting Started</h5>
<p>CascadeSelect requires a value to bind and a collection of arbitrary objects with a nested hierarchy. <i>optionGroupLabel</i>
is used for the text of a category and <i>optionGroupChildren</i> is to define the children of the category. Note that order of the <i>optionGroupChildren</i>
matters and it should correspond to the data hierarchy.</p>
<pre v-code><code>
&lt;CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
@ -106,8 +104,8 @@ data() {
</code></pre>
<h5>Templating</h5>
<p>Content of an item can be customized with the <i>option</i> template.</p>
<h5>Templating</h5>
<p>Content of an item can be customized with the <i>option</i> template.</p>
<pre v-code><code><template v-pre>
&lt;CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
@ -125,360 +123,241 @@ data() {
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>options</td>
<td>array</td>
<td>null</td>
<td>An array of selectitems to display as the available options.</td>
</tr>
<tr>
<td>optionLabel</td>
<td>string</td>
<td>null</td>
<td>Property name or getter function to use as the label of an option.</td>
</tr>
<tr>
<td>optionValue</td>
<td>string</td>
<td>null</td>
<td>Property name or getter function to use as the value of an option, defaults to the option itself when not defined.</td>
</tr>
<tr>
<td>optionGroupLabel</td>
<td>string</td>
<td>null</td>
<td>Property name or getter function to use as the label of an option group.</td>
</tr>
<tr>
<td>optionGroupChildren</td>
<td>string</td>
<td>null</td>
<td>Property name or getter function to retrieve the items of a group.</td>
</tr>
<tr>
<td>placeholder</td>
<td>string</td>
<td>null</td>
<td>Default text to display when no option is selected.</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the component should be disabled.</td>
</tr>
<tr>
<td>dataKey</td>
<td>string</td>
<td>null</td>
<td>A property to uniquely identify an option.</td>
</tr>
<tr>
<td>tabindex</td>
<td>number</td>
<td>null</td>
<td>Index of the element in tabbing order.</td>
</tr>
<tr>
<td>inputId</td>
<td>string</td>
<td>null</td>
<td>Identifier of the underlying input element.</td>
</tr>
<tr>
<td>ariaLabelledBy</td>
<td>string</td>
<td>null</td>
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
</tr>
<tr>
<td>appendTo</td>
<td>string</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
</tr>
</tbody>
</table>
</div>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>options</td>
<td>array</td>
<td>null</td>
<td>An array of selectitems to display as the available options.</td>
</tr>
<tr>
<td>optionLabel</td>
<td>string</td>
<td>null</td>
<td>Property name or getter function to use as the label of an option.</td>
</tr>
<tr>
<td>optionValue</td>
<td>string</td>
<td>null</td>
<td>Property name or getter function to use as the value of an option, defaults to the option itself when not defined.</td>
</tr>
<tr>
<td>optionGroupLabel</td>
<td>string</td>
<td>null</td>
<td>Property name or getter function to use as the label of an option group.</td>
</tr>
<tr>
<td>optionGroupChildren</td>
<td>string</td>
<td>null</td>
<td>Property name or getter function to retrieve the items of a group.</td>
</tr>
<tr>
<td>placeholder</td>
<td>string</td>
<td>null</td>
<td>Default text to display when no option is selected.</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the component should be disabled.</td>
</tr>
<tr>
<td>dataKey</td>
<td>string</td>
<td>null</td>
<td>A property to uniquely identify an option.</td>
</tr>
<tr>
<td>tabindex</td>
<td>number</td>
<td>null</td>
<td>Index of the element in tabbing order.</td>
</tr>
<tr>
<td>inputId</td>
<td>string</td>
<td>null</td>
<td>Identifier of the underlying input element.</td>
</tr>
<tr>
<td>ariaLabelledBy</td>
<td>string</td>
<td>null</td>
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
</tr>
<tr>
<td>appendTo</td>
<td>string</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>change</td>
<td>event.originalEvent: Original event <br />
event.value: Selected option value </td>
<td>Callback to invoke on value change.</td>
</tr>
<tr>
<td>group-change</td>
<td>event.originalEvent: Original event <br />
event.value: Selected option group </td>
<td>Callback to invoke when a group changes.</td>
</tr>
<tr>
<td>before-show</td>
<td>-</td>
<td>Callback to invoke before the overlay is shown.</td>
</tr>
<tr>
<td>before-hide</td>
<td>-</td>
<td>Callback to invoke before the overlay is hidden.</td>
</tr>
<tr>
<td>show</td>
<td>-</td>
<td>Callback to invoke when the overlay is shown.</td>
</tr>
<tr>
<td>hide</td>
<td>-</td>
<td>Callback to invoke when the overlay is hidden.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>change</td>
<td>event.originalEvent: Original event <br />
event.value: Selected option value </td>
<td>Callback to invoke on value change.</td>
</tr>
<tr>
<td>group-change</td>
<td>event.originalEvent: Original event <br />
event.value: Selected option group </td>
<td>Callback to invoke when a group changes.</td>
</tr>
<tr>
<td>before-show</td>
<td>-</td>
<td>Callback to invoke before the overlay is shown.</td>
</tr>
<tr>
<td>before-hide</td>
<td>-</td>
<td>Callback to invoke before the overlay is hidden.</td>
</tr>
<tr>
<td>show</td>
<td>-</td>
<td>Callback to invoke when the overlay is shown.</td>
</tr>
<tr>
<td>hide</td>
<td>-</td>
<td>Callback to invoke when the overlay is hidden.</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>value: Value of the component <br />
placeholder: Placeholder text to show</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>value: Value of the component <br />
placeholder: Placeholder text to show</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-cascadeselect</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-cascadeselect-label</td>
<td>Element to display label of selected option.</td>
</tr>
<tr>
<td>p-cascadeselect-trigger</td>
<td>Icon element.</td>
</tr>
<tr>
<td>p-cascadeselect-panel</td>
<td>Icon element.</td>
</tr>
<tr>
<td>p-cascadeselect-items-wrapper</td>
<td>Wrapper element of items list.</td>
</tr>
<tr>
<td>p-cascadeselect-items</td>
<td>List element of items.</td>
</tr>
<tr>
<td>p-cascadeselect-item</td>
<td>An item in the list.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-cascadeselect</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-cascadeselect-label</td>
<td>Element to display label of selected option.</td>
</tr>
<tr>
<td>p-cascadeselect-trigger</td>
<td>Icon element.</td>
</tr>
<tr>
<td>p-cascadeselect-panel</td>
<td>Icon element.</td>
</tr>
<tr>
<td>p-cascadeselect-items-wrapper</td>
<td>Wrapper element of items list.</td>
</tr>
<tr>
<td>p-cascadeselect-items</td>
<td>List element of items.</td>
</tr>
<tr>
<td>p-cascadeselect-item</td>
<td>An item in the list.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/cascadeselect" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="CascadeSelectDemo" :sources="sources" />
</div>
<pre v-code><code><template v-pre>
&lt;h5&gt;Basic&lt;/h5&gt;
&lt;CascadeSelect v-model="selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City" /&gt;
&lt;h5&gt;Templating&lt;/h5&gt;
&lt;CascadeSelect v-model="selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City"&gt;
&lt;template #option="slotProps"&gt;
&lt;div class="country-item"&gt;
&lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" v-if="slotProps.option.states" /&gt;
&lt;i class="pi pi-compass p-mr-2" v-if="slotProps.option.cities"&gt;&lt;/i&gt;
&lt;i class="pi pi-map-marker p-mr-2" v-if="slotProps.option.cname"&gt;&lt;/i&gt;
&lt;span&gt;{{slotProps.option.cname || slotProps.option.name}}&lt;/span&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/CascadeSelect&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default &#123;
data() &#123;
return &#123;
selectedCity1: null,
selectedCity2: null,
countries: [
&#123;
name: 'Australia',
code: 'AU',
states: [
&#123;
name: 'New South Wales',
cities: [
&#123;cname: 'Sydney', code: 'A-SY'&#125;,
&#123;cname: 'Newcastle', code: 'A-NE'&#125;,
&#123;cname: 'Wollongong', code: 'A-WO'&#125;
]
&#125;,
&#123;
name: 'Queensland',
cities: [
&#123;cname: 'Brisbane', code: 'A-BR'&#125;,
&#123;cname: 'Townsville', code: 'A-TO'&#125;
]
&#125;,
]
&#125;,
&#123;
name: 'Canada',
code: 'CA',
states: [
&#123;
name: 'Quebec',
cities: [
&#123;cname: 'Montreal', code: 'C-MO'&#125;,
&#123;cname: 'Quebec City', code: 'C-QU'&#125;
]
&#125;,
&#123;
name: 'Ontario',
cities: [
&#123;cname: 'Ottawa', code: 'C-OT'&#125;,
&#123;cname: 'Toronto', code: 'C-TO'&#125;
]
&#125;,
]
&#125;,
&#123;
name: 'United States',
code: 'US',
states: [
&#123;
name: 'California',
cities: [
&#123;cname: 'Los Angeles', code: 'US-LA'&#125;,
&#123;cname: 'San Diego', code: 'US-SD'&#125;,
&#123;cname: 'San Francisco', code: 'US-SF'&#125;
]
&#125;,
&#123;
name: 'Florida',
cities: [
&#123;cname: 'Jacksonville', code: 'US-JA'&#125;,
&#123;cname: 'Miami', code: 'US-MI'&#125;,
&#123;cname: 'Tampa', code: 'US-TA'&#125;,
&#123;cname: 'Orlando', code: 'US-OR'&#125;
]
&#125;,
&#123;
name: 'Texas',
cities: [
&#123;cname: 'Austin', code: 'US-AU'&#125;,
&#123;cname: 'Dallas', code: 'US-DA'&#125;,
&#123;cname: 'Houston', code: 'US-HO'&#125;
]
&#125;
]
&#125;
]
&#125;
&#125;
&#125;
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Basic</h5>
<CascadeSelect v-model="selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City" />
'options-api': {
tabName: 'Source',
content: `
<template>
<div>
<div class="card">
<h5>Basic</h5>
<CascadeSelect v-model="selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City" />
<h5>Templating</h5>
<CascadeSelect v-model="selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City">
<template #option="slotProps">
<div class="country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" v-if="slotProps.option.states" />
<i class="pi pi-compass p-mr-2" v-if="slotProps.option.cities"></i>
<i class="pi pi-map-marker p-mr-2" v-if="slotProps.option.cname"></i>
<span>{{slotProps.option.cname || slotProps.option.name}}</span>
</div>
</template>
</CascadeSelect>
</div>
<h5>Templating</h5>
<CascadeSelect v-model="selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City">
<template #option="slotProps">
<div class="country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" v-if="slotProps.option.states" />
<i class="pi pi-compass p-mr-2" v-if="slotProps.option.cities"></i>
<i class="pi pi-map-marker p-mr-2" v-if="slotProps.option.cname"></i>
<span>{{slotProps.option.cname || slotProps.option.name}}</span>
</div>
</template>
</CascadeSelect>
</div>
</div>
</template>
@ -567,19 +446,142 @@ export default {
]
}
}
}`,
style: `<style>
}
<\\/script>
<style>
img {
width: 18px;
margin-right: 0.5rem;
}
</style>`
</style>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div>
<div class="card">
<h5>Basic</h5>
<CascadeSelect v-model="selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City" />
<h5>Templating</h5>
<CascadeSelect v-model="selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City">
<template #option="slotProps">
<div class="country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" v-if="slotProps.option.states" />
<i class="pi pi-compass p-mr-2" v-if="slotProps.option.cities"></i>
<i class="pi pi-map-marker p-mr-2" v-if="slotProps.option.cname"></i>
<span>{{slotProps.option.cname || slotProps.option.name}}</span>
</div>
</template>
</CascadeSelect>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const selectedCity1 = ref();
const selectedCity2 = ref();
const countries = ref([
{
name: 'Australia',
code: 'AU',
states: [
{
name: 'New South Wales',
cities: [
{cname: 'Sydney', code: 'A-SY'},
{cname: 'Newcastle', code: 'A-NE'},
{cname: 'Wollongong', code: 'A-WO'}
]
},
{
name: 'Queensland',
cities: [
{cname: 'Brisbane', code: 'A-BR'},
{cname: 'Townsville', code: 'A-TO'}
]
},
]
},
{
name: 'Canada',
code: 'CA',
states: [
{
name: 'Quebec',
cities: [
{cname: 'Montreal', code: 'C-MO'},
{cname: 'Quebec City', code: 'C-QU'}
]
},
{
name: 'Ontario',
cities: [
{cname: 'Ottawa', code: 'C-OT'},
{cname: 'Toronto', code: 'C-TO'}
]
},
]
},
{
name: 'United States',
code: 'US',
states: [
{
name: 'California',
cities: [
{cname: 'Los Angeles', code: 'US-LA'},
{cname: 'San Diego', code: 'US-SD'},
{cname: 'San Francisco', code: 'US-SF'}
]
},
{
name: 'Florida',
cities: [
{cname: 'Jacksonville', code: 'US-JA'},
{cname: 'Miami', code: 'US-MI'},
{cname: 'Tampa', code: 'US-TA'},
{cname: 'Orlando', code: 'US-OR'}
]
},
{
name: 'Texas',
cities: [
{cname: 'Austin', code: 'US-AU'},
{cname: 'Dallas', code: 'US-DA'},
{cname: 'Houston', code: 'US-HO'}
]
}
]
}
]);
return { selectedCity1, selectedCity2, countries }
}
}
<\\/script>
<style>
img {
width: 18px;
margin-right: 0.5rem;
}
</style>
`
}
}
}
},
components: {
LiveEditor
}
}
</script>

333
src/views/checkbox/CheckboxDoc.vue
View File

@ -1,22 +1,20 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="CheckboxDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import Checkbox from 'primevue/checkbox';
</code></pre>
<h5>Getting Started</h5>
<p>Checkbox can either be used in multiple selection with other checkboxes or as a single checkbox to provide a boolean value.</p>
<h5>Getting Started</h5>
<p>Checkbox can either be used in multiple selection with other checkboxes or as a single checkbox to provide a boolean value.</p>
<pre v-code><code>
&lt;Checkbox v-model="checked" :binary="true" /&gt;
</code></pre>
<h5>Multiple Values</h5>
<p>Multiple mode is enabled by default, v-model property refers to an array to bind the selected values.</p>
<h5>Multiple Values</h5>
<p>Multiple mode is enabled by default, v-model property refers to an array to bind the selected values.</p>
<pre v-code><code>
&lt;Checkbox name="city" value="Chicago" v-model="cities" /&gt;
&lt;Checkbox name="city" value="Los Angeles" v-model="cities" /&gt;
@ -36,182 +34,120 @@ export default {
</code></pre>
<p>As v-model is two-way binding enabled, prepopulating the model array with values is enough to display the related
checkboxes as checked by default.</p>
<p>As v-model is two-way binding enabled, prepopulating the model array with values is enough to display the related
checkboxes as checked by default.</p>
<h5>Properties</h5>
<p>Any property such as name and autofocus are passed to the underlying input element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>any</td>
<td>null</td>
<td>Value of the checkbox.</td>
</tr>
<tr>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value binding of the checkbox.</td>
</tr>
<tr>
<td>binary</td>
<td>boolean</td>
<td>false</td>
<td>Allows to select a boolean value instead of multiple values.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property such as name and autofocus are passed to the underlying input element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>any</td>
<td>null</td>
<td>Value of the checkbox.</td>
</tr>
<tr>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value binding of the checkbox.</td>
</tr>
<tr>
<td>binary</td>
<td>boolean</td>
<td>false</td>
<td>Allows to select a boolean value instead of multiple values.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<p>Any valid event such as focus and blur.</p>
<h5>Events</h5>
<p>Any valid event such as focus and blur.</p>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-checkbox</td>
<td>Container element</td>
</tr>
<tr>
<td>p-checkbox-box</td>
<td>Container of icon.</td>
</tr>
<tr>
<td>p-checkbox-icon</td>
<td>Icon element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-checkbox</td>
<td>Container element</td>
</tr>
<tr>
<td>p-checkbox-box</td>
<td>Container of icon.</td>
</tr>
<tr>
<td>p-checkbox-icon</td>
<td>Icon element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/inputtext" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="CheckboxDemo" :sources="sources"/>
</div>
<pre v-code><code><template v-pre>
&lt;h3&gt;Basic&lt;/h3&gt;
&lt;div class="p-field-checkbox"&gt;
&lt;Checkbox id="binary" v-model="checked" :binary="true" /&gt;
&lt;label for="binary"&gt;{{checked}}&lt;/label&gt;
&lt;/div&gt;
&lt;h3&gt;Multiple&lt;/h3&gt;
&lt;div class="p-field-checkbox"&gt;
&lt;Checkbox id="city1" name="city" value="Chicago" v-model="cities" /&gt;
&lt;label for="city1"&gt;Chicago&lt;/label&gt;
&lt;/div&gt;
&lt;div class="p-field-checkbox"&gt;
&lt;Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" /&gt;
&lt;label for="city2"&gt;Los Angeles&lt;/label&gt;
&lt;/div&gt;
&lt;div class="p-field-checkbox"&gt;
&lt;Checkbox id="city3" name="city" value="New York" v-model="cities" /&gt;
&lt;label for="city3"&gt;New York&lt;/label&gt;
&lt;/div&gt;
&lt;div class="p-field-checkbox"&gt;
&lt;Checkbox id="city4" name="city" value="San Francisco" v-model="cities" /&gt;
&lt;label for="city4"&gt;San Francisco&lt;/label&gt;
&lt;/div&gt;
&lt;h3&gt;Dynamic Values, Preselection, Value Binding and Disabled Option&lt;/h3&gt;
&lt;div v-for="category of categories" :key="category.key" class="p-field-checkbox"&gt;
&lt;Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/&gt;
&lt;label :for="category.key"&gt;{{category.name}}&lt;/label&gt;
&lt;/div&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
checked: false,
cities: [],
categories: [{name: 'Accounting', key: 'A'}, {name: 'Marketing', key: 'M'}, {name: 'Production', key: 'P'}, {name: 'Research', key: 'R'}],
selectedCategories: []
}
},
created() {
this.selectedCategories = this.categories.slice(1,3);
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
'options-api': {
tabName: 'Source',
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Basic</h5>
<div class="p-field-checkbox">
<Checkbox id="binary" v-model="checked" :binary="true" />
<label for="binary">{{checked}}</label>
</div>
<div>
<div class="card">
<h5>Basic</h5>
<div class="p-field-checkbox">
<Checkbox id="binary" v-model="checked" :binary="true" />
<label for="binary">{{checked}}</label>
</div>
<h5>Multiple</h5>
<div class="p-field-checkbox">
<Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
<label for="city1">Chicago</label>
</div>
<div class="p-field-checkbox">
<Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
<label for="city2">Los Angeles</label>
</div>
<div class="p-field-checkbox">
<Checkbox id="city3" name="city" value="New York" v-model="cities" />
<label for="city3">New York</label>
</div>
<div class="p-field-checkbox">
<Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
<label for="city4">San Francisco</label>
</div>
<h5>Multiple</h5>
<div class="p-field-checkbox">
<Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
<label for="city1">Chicago</label>
</div>
<div class="p-field-checkbox">
<Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
<label for="city2">Los Angeles</label>
</div>
<div class="p-field-checkbox">
<Checkbox id="city3" name="city" value="New York" v-model="cities" />
<label for="city3">New York</label>
</div>
<div class="p-field-checkbox">
<Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
<label for="city4">San Francisco</label>
</div>
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
<div v-for="category of categories" :key="category.key" class="p-field-checkbox">
<Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/>
<label :for="category.key">{{category.name}}</label>
</div>
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
<div v-for="category of categories" :key="category.key" class="p-field-checkbox">
<Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/>
<label :for="category.key">{{category.name}}</label>
</div>
</div>
</div>
</div>
</template>
<script>
@ -228,14 +164,67 @@ export default {
this.selectedCategories = this.categories.slice(1,3);
}
}
`
<\\/script>`
},
'composition-api': {
tabName: 'Composition API',
content: `<template>
<div>
<div class="card">
<h5>Basic</h5>
<div class="p-field-checkbox">
<Checkbox id="binary" v-model="checked" :binary="true" />
<label for="binary">{{checked}}</label>
</div>
<h5>Multiple</h5>
<div class="p-field-checkbox">
<Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
<label for="city1">Chicago</label>
</div>
<div class="p-field-checkbox">
<Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
<label for="city2">Los Angeles</label>
</div>
<div class="p-field-checkbox">
<Checkbox id="city3" name="city" value="New York" v-model="cities" />
<label for="city3">New York</label>
</div>
<div class="p-field-checkbox">
<Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
<label for="city4">San Francisco</label>
</div>
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
<div v-for="category of categories" :key="category.key" class="p-field-checkbox">
<Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/>
<label :for="category.key">{{category.name}}</label>
</div>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const checked = ref(false);
const cities = ref([]);
const categories = ref([
{name: 'Accounting', key: 'A'},
{name: 'Marketing', key: 'M'},
{name: 'Production', key: 'P'},
{name: 'Research', key: 'R'}
]);
const selectedCategories = ref(categories.value.slice(1,3));
return { checked, cities, categories, selectedCategories }
}
}
<\\/script>`
}
}
}
},
components: {
LiveEditor
}
}
</script>

394
src/views/chips/ChipsDoc.vue
View File

@ -1,22 +1,20 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="ChipsDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import Chips from 'primevue/chips';
</code></pre>
<h5>Getting Started</h5>
<p>An array as the value can be bound using the standard v-model directive.</p>
<h5>Getting Started</h5>
<p>An array as the value can be bound using the standard v-model directive.</p>
<pre v-code><code>
&lt;Chips v-model="value" /&gt;
</code></pre>
<h5>Custom Content</h5>
<p>A chip is customized using the <i>chip</i> template where the chip value is passed to the slotProps with the value property.</p>
<h5>Custom Content</h5>
<p>A chip is customized using the <i>chip</i> template where the chip value is passed to the slotProps with the value property.</p>
<pre v-code><code><template v-pre>
&lt;Chips v-model="value"&gt;
&lt;template #chip="slotProps"&gt;
@ -29,208 +27,165 @@ import Chips from 'primevue/chips';
</template>
</code></pre>
<h5>Properties</h5>
<p>Any property such as name and placeholder are passed to the underlying input element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>array</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>max</td>
<td>number</td>
<td>null</td>
<td>Maximum number of entries allowed.</td>
</tr>
<tr>
<td>separator</td>
<td>string</td>
<td>null</td>
<td>Separator char to add an item when pressed in addition to the enter key. Currently only possible value is ","</td>
</tr>
<tr>
<td>addOnBlur</td>
<td>boolean</td>
<td>false</td>
<td>Whether to add an item when the input loses focus.</td>
</tr>
<tr>
<td>allowDuplicate</td>
<td>boolean</td>
<td>true</td>
<td>Whether to allow duplicate values or not.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property such as name and placeholder are passed to the underlying input element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>array</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>max</td>
<td>number</td>
<td>null</td>
<td>Maximum number of entries allowed.</td>
</tr>
<tr>
<td>separator</td>
<td>string</td>
<td>null</td>
<td>Separator char to add an item when pressed in addition to the enter key. Currently only possible value is ","</td>
</tr>
<tr>
<td>addOnBlur</td>
<td>boolean</td>
<td>false</td>
<td>Whether to add an item when the input loses focus.</td>
</tr>
<tr>
<td>allowDuplicate</td>
<td>boolean</td>
<td>true</td>
<td>Whether to allow duplicate values or not.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<p>Any valid event such as focus, blur and input are passed to the underlying input element. Following are the additional events to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>add</td>
<td>originalEvent: Browser event <br/>
value: Added item value</td>
<td>Callback to invoke when a chip is added.</td>
</tr>
<tr>
<td>remove</td>
<td>originalEvent: Browser event <br/>
value: Removed item value</td>
<td>Callback to invoke when a chip is removed.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<p>Any valid event such as focus, blur and input are passed to the underlying input element. Following are the additional events to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>add</td>
<td>originalEvent: Browser event <br/>
value: Added item value</td>
<td>Callback to invoke when a chip is added.</td>
</tr>
<tr>
<td>remove</td>
<td>originalEvent: Browser event <br/>
value: Removed item value</td>
<td>Callback to invoke when a chip is removed.</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>chip</td>
<td>value: Value of the component</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>chip</td>
<td>value: Value of the component</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-chips</td>
<td>Container element</td>
</tr>
<tr>
<td>p-chips-token</td>
<td>Chip element container.</td>
</tr>
<tr>
<td>p-chips-token-icon</td>
<td>Icon of a chip.</td>
</tr>
<tr>
<td>p-chips-token-label</td>
<td>label of a chip.</td>
</tr>
<tr>
<td>p-chips-input-token</td>
<td>Container of input element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-chips</td>
<td>Container element</td>
</tr>
<tr>
<td>p-chips-token</td>
<td>Chip element container.</td>
</tr>
<tr>
<td>p-chips-token-icon</td>
<td>Icon of a chip.</td>
</tr>
<tr>
<td>p-chips-token-label</td>
<td>label of a chip.</td>
</tr>
<tr>
<td>p-chips-input-token</td>
<td>Container of input element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/chips" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="ChipsDemo" :sources="sources"/>
</div>
<pre v-code><code><template v-pre>
&lt;h5&gt;Basic&lt;/h5&gt;
&lt;Chips v-model="value1" /&gt;
&lt;h5&gt;Comma Separator&lt;/h5&gt;
&lt;Chips v-model="value2" separator="," /&gt;
&lt;h5&gt;Template&lt;/h5&gt;
&lt;Chips v-model="value3"&gt;
&lt;template #chip="slotProps"&gt;
&lt;div&gt;
&lt;span&gt;{{slotProps.value}} - (active) &lt;/span&gt;
&lt;i class="pi pi-user-plus" style="font-size: 14px"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/Chips&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
value1: null,
value2: null,
value3: null
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation p-fluid">
<div class="card">
<h5>Basic</h5>
<Chips v-model="value1" />
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="p-fluid">
<div class="card">
<h5>Basic</h5>
<Chips v-model="value1" />
<h5>Comma Separator</h5>
<Chips v-model="value2" separator="," />
<h5>Comma Separator</h5>
<Chips v-model="value2" separator="," />
<h5>Template</h5>
<Chips v-model="value3">
<template #chip="slotProps">
<div>
<span>{{slotProps.value}} - (active) </span>
<i class="pi pi-user-plus" style="font-size: 14px"></i>
</div>
</template>
</Chips>
</div>
<h5>Template</h5>
<Chips v-model="value3">
<template #chip="slotProps">
<div>
<span>{{slotProps.value}} - (active) </span>
<i class="pi pi-user-plus" style="font-size: 14px"></i>
</div>
</template>
</Chips>
</div>
</div>
</template>
@ -245,13 +200,52 @@ export default {
}
}
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="p-fluid">
<div class="card">
<h5>Basic</h5>
<Chips v-model="value1" />
<h5>Comma Separator</h5>
<Chips v-model="value2" separator="," />
<h5>Template</h5>
<Chips v-model="value3">
<template #chip="slotProps">
<div>
<span>{{slotProps.value}} - (active) </span>
<i class="pi pi-user-plus" style="font-size: 14px"></i>
</div>
</template>
</Chips>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const value1 = ref();
const value2 = ref();
const value3 = ref();
return { value1, value2, value3 }
}
}
<\\/script>
`
}
}
}
},
components: {
LiveEditor
}
}
</script>

349
src/views/colorpicker/ColorPickerDoc.vue
View File

@ -1,15 +1,13 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="ColorPickerDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import ColorPicker from 'primevue/colorpicker';
</code></pre>
<h5>Getting Started</h5>
<p>A model can be bound using the standard v-model directive. Default color format to use in value binding is "hex" and other possible values are "rgb" and "hsb".</p>
<h5>Getting Started</h5>
<p>A model can be bound using the standard v-model directive. Default color format to use in value binding is "hex" and other possible values are "rgb" and "hsb".</p>
<pre v-code><code>
&lt;ColorPicker v-model="color" /&gt;
@ -26,192 +24,159 @@ export default {
</code></pre>
<h5>Inline and Overlay</h5>
<p>ColorPicker is displayed as an overlay with a preview option by default where second alternative is the inline mode.</p>
<h5>Inline and Overlay</h5>
<p>ColorPicker is displayed as an overlay with a preview option by default where second alternative is the inline mode.</p>
<pre v-code><code>
&lt;ColorPicker v-model="color" :inline="true" /&gt;
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>defaultColor</td>
<td>string</td>
<td>ff0000</td>
<td>Initial color to display when value is not defined.</td>
</tr>
<tr>
<td>inline</td>
<td>boolean</td>
<td>false</td>
<td>Whether to display as an overlay or not.</td>
</tr>
<tr>
<td>format</td>
<td>string</td>
<td>hex</td>
<td>Format to use in value binding, supported formats are "hex", "rgb" and "hsb".</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the component should be disabled.</td>
</tr>
<tr>
<td>tabindex</td>
<td>string</td>
<td>null</td>
<td>Index of the element in tabbing order.</td>
</tr>
<tr>
<td>baseZIndex</td>
<td>number</td>
<td>0</td>
<td>Base zIndex value to use in layering.</td>
</tr>
<tr>
<td>autoZIndex</td>
<td>boolean</td>
<td>true</td>
<td>Whether to automatically manage layering.</td>
</tr>
<tr>
<td>ariaLabelledBy</td>
<td>string</td>
<td>null</td>
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>defaultColor</td>
<td>string</td>
<td>ff0000</td>
<td>Initial color to display when value is not defined.</td>
</tr>
<tr>
<td>inline</td>
<td>boolean</td>
<td>false</td>
<td>Whether to display as an overlay or not.</td>
</tr>
<tr>
<td>format</td>
<td>string</td>
<td>hex</td>
<td>Format to use in value binding, supported formats are "hex", "rgb" and "hsb".</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the component should be disabled.</td>
</tr>
<tr>
<td>tabindex</td>
<td>string</td>
<td>null</td>
<td>Index of the element in tabbing order.</td>
</tr>
<tr>
<td>baseZIndex</td>
<td>number</td>
<td>0</td>
<td>Base zIndex value to use in layering.</td>
</tr>
<tr>
<td>autoZIndex</td>
<td>boolean</td>
<td>true</td>
<td>Whether to automatically manage layering.</td>
</tr>
<tr>
<td>ariaLabelledBy</td>
<td>string</td>
<td>null</td>
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list style classed of the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-colorpicker</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-colorpicker-overlay</td>
<td>Container element in overlay mode.</td>
</tr>
<tr>
<td>p-colorpicker-preview </td>
<td>Preview input in overlay mode.</td>
</tr>
<tr>
<td>p-colorpicker-panel</td>
<td>Panel element of the colorpicker.</td>
</tr>
<tr>
<td>p-colorpicker-content</td>
<td>Wrapper that contains color and hue sections.</td>
</tr>
<tr>
<td>p-colorpicker-color-selector</td>
<td>Color selector container.</td>
</tr>
<tr>
<td>p-colorpicker-color</td>
<td>Color element.</td>
</tr>
<tr>
<td>p-colorpicker-color-handle</td>
<td>Handle of the color element.</td>
</tr>
<tr>
<td>p-colorpicker-hue</td>
<td>Hue slider.</td>
</tr>
<tr>
<td>p-colorpicker-hue-handle</td>
<td>Handle of the hue slider.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list style classed of the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-colorpicker</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-colorpicker-overlay</td>
<td>Container element in overlay mode.</td>
</tr>
<tr>
<td>p-colorpicker-preview </td>
<td>Preview input in overlay mode.</td>
</tr>
<tr>
<td>p-colorpicker-panel</td>
<td>Panel element of the colorpicker.</td>
</tr>
<tr>
<td>p-colorpicker-content</td>
<td>Wrapper that contains color and hue sections.</td>
</tr>
<tr>
<td>p-colorpicker-color-selector</td>
<td>Color selector container.</td>
</tr>
<tr>
<td>p-colorpicker-color</td>
<td>Color element.</td>
</tr>
<tr>
<td>p-colorpicker-color-handle</td>
<td>Handle of the color element.</td>
</tr>
<tr>
<td>p-colorpicker-hue</td>
<td>Hue slider.</td>
</tr>
<tr>
<td>p-colorpicker-hue-handle</td>
<td>Handle of the hue slider.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/inputtext" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="ColorPickerDemo" :sources="sources"/>
</div>
<pre v-code><code><template v-pre>
&lt;h3&gt;Inline&lt;/h3&gt;
&lt;ColorPicker v-model="color1" :inline="true" /&gt;
&lt;h3&gt;Overlay&lt;/h3&gt;
&lt;ColorPicker v-model="color2" /&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
color1: null,
color2: '1976D2'
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
'options-api': {
tabName: 'Source',
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Inline</h5>
<ColorPicker v-model="color1" :inline="true" />
<div>
<div class="card">
<h5>Inline</h5>
<ColorPicker v-model="color1" :inline="true" />
<h5>Overlay</h5>
<ColorPicker v-model="color2" />
</div>
<h5>Overlay</h5>
<ColorPicker v-model="color2" />
</div>
</div>
</template>
@ -225,13 +190,39 @@ export default {
}
}
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API',
content: `<template>
<div>
<div class="card">
<h5>Inline</h5>
<ColorPicker v-model="color1" :inline="true" />
<h5>Overlay</h5>
<ColorPicker v-model="color2" />
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const color1 = ref(null);
const color2 = ref('1976D2');
return { color1, color2 }
}
}
<\\/script>
`
}
}
}
},
components: {
LiveEditor
}
}
</script>

1017
src/views/dropdown/DropdownDoc.vue
View File

File diff suppressed because it is too large Load Diff

373
src/views/editor/EditorDoc.vue
View File

@ -1,22 +1,20 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="EditorDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import Editor from 'primevue/editor';
</code></pre>
<h5>Getting Started</h5>
<p>A model can be bound using the standard v-model directive.</p>
<h5>Getting Started</h5>
<p>A model can be bound using the standard v-model directive.</p>
<pre v-code><code>
&lt;Editor v-model="value" editorStyle="height: 320px"/&gt;
</code></pre>
<h5>Toolbar</h5>
<p>Editor provides a default toolbar with common options, to customize it define your elements inside the header element. Refer to <a href="http://quilljs.com/docs/modules/toolbar/">Quill documentation</a> for available controls.</p>
<h5>Toolbar</h5>
<p>Editor provides a default toolbar with common options, to customize it define your elements inside the header element. Refer to <a href="http://quilljs.com/docs/modules/toolbar/">Quill documentation</a> for available controls.</p>
<pre v-code><code>
&lt;Editor v-model="value" editorStyle="height: 320px"&gt;
&lt;template #toolbar&gt;
@ -30,202 +28,162 @@ import Editor from 'primevue/editor';
</code></pre>
<h5>Properties</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>string</td>
<td>null</td>
<td>Value of the content.</td>
</tr>
<tr>
<td>placeholder</td>
<td>string</td>
<td>null</td>
<td>Placeholder text to show when editor is empty.</td>
</tr>
<tr>
<td>readonly</td>
<td>boolean</td>
<td>false</td>
<td>Whether to instantiate the editor to readonly mode.</td>
</tr>
<tr>
<td>formats</td>
<td>string[]</td>
<td>null</td>
<td>Whitelist of formats to display, see <a href="http://quilljs.com/docs/formats/">here</a> for available options.</td>
</tr>
<tr>
<td>editorStyle</td>
<td>any</td>
<td>null</td>
<td>Inline style of the container.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>string</td>
<td>null</td>
<td>Value of the content.</td>
</tr>
<tr>
<td>placeholder</td>
<td>string</td>
<td>null</td>
<td>Placeholder text to show when editor is empty.</td>
</tr>
<tr>
<td>readonly</td>
<td>boolean</td>
<td>false</td>
<td>Whether to instantiate the editor to readonly mode.</td>
</tr>
<tr>
<td>formats</td>
<td>string[]</td>
<td>null</td>
<td>Whitelist of formats to display, see <a href="http://quilljs.com/docs/formats/">here</a> for available options.</td>
</tr>
<tr>
<td>editorStyle</td>
<td>any</td>
<td>null</td>
<td>Inline style of the container.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>text-change</td>
<td>event.delta: Representation of the change.<br/>
event.source: Source of change. Will be either "user" or "api".<br/>
event.htmlValue: Current value as html.<br/>
event.textValue: Current value as text.<br/>
event.instance: Text editor instance.</td>
<td>Callback to invoke when text of editor changes.</td>
</tr>
<tr>
<td>input</td>
<td>event: Current value as html.</td>
<td>Callback to invoke when text of editor changes.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>text-change</td>
<td>event.delta: Representation of the change.<br/>
event.source: Source of change. Will be either "user" or "api".<br/>
event.htmlValue: Current value as html.<br/>
event.textValue: Current value as text.<br/>
event.instance: Text editor instance.</td>
<td>Callback to invoke when text of editor changes.</td>
</tr>
<tr>
<td>input</td>
<td>event: Current value as html.</td>
<td>Callback to invoke when text of editor changes.</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>toolbar</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>toolbar</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<p>Refer to <a href="http://beta.quilljs.com/docs/api/#events">Quill documentation</a> for more information.</p>
<p>Refer to <a href="http://beta.quilljs.com/docs/api/#events">Quill documentation</a> for more information.</p>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-editor-container</td>
<td>Container element</td>
</tr>
<tr>
<td>p-editor-toolbar</td>
<td>Toolbar of the editor</td>
</tr>
<tr>
<td>p-editor-content</td>
<td>Editable area</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-editor-container</td>
<td>Container element</td>
</tr>
<tr>
<td>p-editor-toolbar</td>
<td>Toolbar of the editor</td>
</tr>
<tr>
<td>p-editor-content</td>
<td>Editable area</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p><a href="http://quilljs.com">Quill</a> Editor 1.3+.</p>
<p>Resources of quill needs to be added to your application.</p>
<h5>Dependencies</h5>
<p><a href="http://quilljs.com">Quill</a> Editor 1.3+.</p>
<p>Resources of quill needs to be added to your application.</p>
<pre v-code><code>
npm install quill --save
</code></pre>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/inputtext" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="EditorDemo" :sources="sources" :directives="['Tooltip']"/>
</div>
<pre v-code><code><template v-pre>
&lt;h3&gt;Default&lt;/h3&gt;
&lt;Editor v-model="value1" editorStyle="height: 320px"/&gt;
&lt;h3&gt;Customized&lt;/h3&gt;
&lt;Editor v-model="value2" editorStyle="height: 320px"&gt;
&lt;template #toolbar&gt;
&lt;span class="ql-formats"&gt;
&lt;button class="ql-bold" v-tooltip.bottom="'Bold'"&gt;&lt;/button&gt;
&lt;button class="ql-italic" v-tooltip.bottom="'Italic'"&gt;&lt;/button&gt;
&lt;button class="ql-underline" v-tooltip.bottom="'Underline'"&gt;&lt;/button&gt;
&lt;/span&gt;
&lt;/template&gt;
&lt;/Editor&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
value1: '&lt;div&gt;Welcome to PrimeVue &lt;b&gt;Editor&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;',
value2: ''
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Default</h5>
<Editor v-model="value1" editorStyle="height: 320px"/>
'options-api': {
tabName: 'Source',
content: `
<template>
<div>
<div class="card">
<h5>Default</h5>
<Editor v-model="value1" editorStyle="height: 320px"/>
<h5>Customized</h5>
<Editor v-model="value2" editorStyle="height: 320px">
<template v-slot:toolbar>
<span class="ql-formats">
<button class="ql-bold" v-tooltip.bottom="'Bold'"></button>
<button class="ql-italic" v-tooltip.bottom="'Italic'"></button>
<button class="ql-underline" v-tooltip.bottom="'Underline'"></button>
</span>
</template>
</Editor>
</div>
<h5>Customized</h5>
<Editor v-model="value2" editorStyle="height: 320px">
<template v-slot:toolbar>
<span class="ql-formats">
<button class="ql-bold" v-tooltip.bottom="'Bold'"></button>
<button class="ql-italic" v-tooltip.bottom="'Italic'"></button>
<button class="ql-underline" v-tooltip.bottom="'Underline'"></button>
</span>
</template>
</Editor>
</div>
</div>
</template>
@ -239,13 +197,48 @@ export default {
}
}
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div>
<div class="card">
<h5>Default</h5>
<Editor v-model="value1" editorStyle="height: 320px"/>
<h5>Customized</h5>
<Editor v-model="value2" editorStyle="height: 320px">
<template v-slot:toolbar>
<span class="ql-formats">
<button class="ql-bold" v-tooltip.bottom="'Bold'"></button>
<button class="ql-italic" v-tooltip.bottom="'Italic'"></button>
<button class="ql-underline" v-tooltip.bottom="'Underline'"></button>
</span>
</template>
</Editor>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const value1 = ref('<div>Welcome to PrimeVue <b>Editor</b></div><div><br></div>');
const value2 = ref('');
return { value1, value2 }
}
}
<\\/script>
`
}
}
}
},
components: {
LiveEditor
}
}
</script>

672
src/views/floatlabel/FloatLabelDemo.vue
View File

@ -107,249 +107,12 @@
</div>
</div>
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<div class="p-d-flex p-jc-end">
<LiveEditor name="FloatLabelDemo" :sources="sources" service="CountryService" data="countries" :components="['InputText', 'AutoComplete', 'Calendar', 'Chips', 'InputMask', 'InputNumber', 'CascadeSelect', 'Dropdown', 'MultiSelect', 'Textarea']" />
</div>
<pre v-code><code><template v-pre>
&lt;div class="p-fluid p-grid"&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;span class="p-float-label"&gt;
&lt;InputText id="inputtext" type="text" v-model="value1" /&gt;
&lt;label for="inputtext"&gt;InputText&lt;/label&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;span class="p-float-label p-input-icon-left"&gt;
&lt;i class="pi pi-search" /&gt;
&lt;InputText id="inputtext-left" type="text" v-model="valueIconLeft" /&gt;
&lt;label for="inputtext-left"&gt;Left Icon&lt;/label&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;span class="p-float-label p-input-icon-right"&gt;
&lt;i class="pi pi-search" /&gt;
&lt;InputText id="inputtext-right" type="text" v-model="valueIconRight" /&gt;
&lt;label for="inputtext-right"&gt;Right Icon&lt;/label&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;span class="p-float-label"&gt;
&lt;AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" /&gt;
&lt;label for="autocomplete"&gt;AutoComplete&lt;/label&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;span class="p-float-label"&gt;
&lt;Calendar id="calendar" v-model="value3" /&gt;
&lt;label for="calendar"&gt;Calendar&lt;/label&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;span class="p-float-label"&gt;
&lt;Chips id="chips" v-model="value4" /&gt;
&lt;label for="chips"&gt;Chips&lt;/label&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;span class="p-float-label"&gt;
&lt;InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" /&gt;
&lt;label for="inputmask"&gt;InputMask&lt;/label&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;span class="p-float-label"&gt;
&lt;InputNumber id="inputnumber" v-model="value6" /&gt;
&lt;label for="inputnumber"&gt;InputNumber&lt;/label&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;div class="p-inputgroup"&gt;
&lt;span class="p-inputgroup-addon"&gt;
&lt;i class="pi pi-user"&gt;&lt;/i&gt;
&lt;/span&gt;
&lt;span class="p-float-label"&gt;
&lt;InputText id="inputgroup" type="text" v-model="value7" /&gt;
&lt;label for="inputgroup"&gt;InputGroup&lt;/label&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;span class="p-float-label"&gt;
&lt;CascadeSelect id="cascadeSelect" v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" /&gt;
&lt;label for="multiselect"&gt;CascadeSelect&lt;/label&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;span class="p-float-label"&gt;
&lt;Dropdown id="dropdown" v-model="value8" :options="cities" optionLabel="name" /&gt;
&lt;label for="dropdown"&gt;Dropdown&lt;/label&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;span class="p-float-label"&gt;
&lt;MultiSelect id="multiselect" v-model="value9" :options="cities" optionLabel="name" /&gt;
&lt;label for="multiselect"&gt;MultiSelect&lt;/label&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;span class="p-float-label"&gt;
&lt;Textarea id="textarea" v-model="value10" rows="3" /&gt;
&lt;label for="textarea"&gt;Textarea&lt;/label&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;span class="p-float-label"&gt;
&lt;Password id="password" v-model="value11" /&gt;
&lt;label for="password"&gt;Password&lt;/label&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</template>
</code></pre>
<pre v-code.script><code>
import CountryService from '../../service/CountryService';
export default {
data() {
return {
countries: null,
filteredCountries: null,
cities: [
{name: 'New York', code: 'NY'},
{name: 'Rome', code: 'RM'},
{name: 'London', code: 'LDN'},
{name: 'Istanbul', code: 'IST'},
{name: 'Paris', code: 'PRS'}
],
value1: null,
value2: null,
value3: null,
value4: null,
value5: null,
value6: null,
value7: null,
value8: null,
value9: null,
value10: null,
value11: null,
selectedCity: null,
cascadeCountries: [
{
name: 'Australia',
code: 'AU',
states: [
{
name: 'New South Wales',
cities: [
{cname: 'Sydney', code: 'A-SY'},
{cname: 'Newcastle', code: 'A-NE'},
{cname: 'Wollongong', code: 'A-WO'}
]
},
{
name: 'Queensland',
cities: [
{cname: 'Brisbane', code: 'A-BR'},
{cname: 'Townsville', code: 'A-TO'}
]
},
]
},
{
name: 'Canada',
code: 'CA',
states: [
{
name: 'Quebec',
cities: [
{cname: 'Montreal', code: 'C-MO'},
{cname: 'Quebec City', code: 'C-QU'}
]
},
{
name: 'Ontario',
cities: [
{cname: 'Ottawa', code: 'C-OT'},
{cname: 'Toronto', code: 'C-TO'}
]
},
]
},
{
name: 'United States',
code: 'US',
states: [
{
name: 'California',
cities: [
{cname: 'Los Angeles', code: 'US-LA'},
{cname: 'San Diego', code: 'US-SD'},
{cname: 'San Francisco', code: 'US-SF'}
]
},
{
name: 'Florida',
cities: [
{cname: 'Jacksonville', code: 'US-JA'},
{cname: 'Miami', code: 'US-MI'},
{cname: 'Tampa', code: 'US-TA'},
{cname: 'Orlando', code: 'US-OR'}
]
},
{
name: 'Texas',
cities: [
{cname: 'Austin', code: 'US-AU'},
{cname: 'Dallas', code: 'US-DA'},
{cname: 'Houston', code: 'US-HO'}
]
}
]
}
]
}
},
countryService: null,
created() {
this.countryService = new CountryService();
},
mounted() {
this.countryService.getCountries().then(data => this.countries = data);
},
methods: {
searchCountry(event) {
setTimeout(() => {
if (!event.query.trim().length) {
this.filteredCountries = [...this.countries];
}
else {
this.filteredCountries = this.countries.filter((country) => {
return country.name.toLowerCase().startsWith(event.query.toLowerCase());
});
}
}, 250);
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<AppDoc name="FloatLabelDemo" :sources="sources" service="CountryService" data="countries" />
</div>
</template>
<script>
import CountryService from '../../service/CountryService';
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
@ -454,112 +217,112 @@ export default {
}
],
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<div class="p-fluid p-grid">
<div class="p-field p-col-12 p-md-4">
'options-api': {
tabName: 'Source',
content: `
<template>
<div>
<div class="card">
<div class="p-fluid p-grid">
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<InputText id="inputtext" type="text" v-model="value1" />
<label for="inputtext">InputText</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label p-input-icon-left">
<i class="pi pi-search" />
<InputText id="inputtext-left" type="text" v-model="valueIconLeft" />
<label for="inputtext-left">Left Icon</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label p-input-icon-right">
<i class="pi pi-search" />
<InputText id="inputtext-right" type="text" v-model="valueIconRight" />
<label for="inputtext-right">Right Icon</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
<label for="autocomplete">AutoComplete</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<Calendar id="calendar" v-model="value3" />
<label for="calendar">Calendar</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<Chips id="chips" v-model="value4" />
<label for="chips">Chips</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" />
<label for="inputmask">InputMask</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<InputNumber id="inputnumber" v-model="value6" />
<label for="inputnumber">InputNumber</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">
<i class="pi pi-user"></i>
</span>
<span class="p-float-label">
<InputText id="inputtext" type="text" v-model="value1" />
<label for="inputtext">InputText</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label p-input-icon-left">
<i class="pi pi-search" />
<InputText id="inputtext-left" type="text" v-model="valueIconLeft" />
<label for="inputtext-left">Left Icon</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label p-input-icon-right">
<i class="pi pi-search" />
<InputText id="inputtext-right" type="text" v-model="valueIconRight" />
<label for="inputtext-right">Right Icon</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
<label for="autocomplete">AutoComplete</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<Calendar id="calendar" v-model="value3" />
<label for="calendar">Calendar</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<Chips id="chips" v-model="value4" />
<label for="chips">Chips</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" />
<label for="inputmask">InputMask</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<InputNumber id="inputnumber" v-model="value6" />
<label for="inputnumber">InputNumber</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">
<i class="pi pi-user"></i>
</span>
<span class="p-float-label">
<InputText id="inputgroup" type="text" v-model="value7" />
<label for="inputgroup">InputGroup</label>
</span>
</div>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<CascadeSelect id="cascadeSelect" v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" />
<label for="multiselect">CascadeSelect</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<Dropdown id="dropdown" v-model="value8" :options="cities" optionLabel="name" />
<label for="dropdown">Dropdown</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<MultiSelect id="multiselect" v-model="value9" :options="cities" optionLabel="name" />
<label for="multiselect">MultiSelect</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<Textarea id="textarea" v-model="value10" rows="3" />
<label for="textarea">Textarea</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<Password id="password" v-model="value11" />
<label for="password">Password</label>
<InputText id="inputgroup" type="text" v-model="value7" />
<label for="inputgroup">InputGroup</label>
</span>
</div>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<CascadeSelect id="cascadeSelect" v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" />
<label for="multiselect">CascadeSelect</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<Dropdown id="dropdown" v-model="value8" :options="cities" optionLabel="name" />
<label for="dropdown">Dropdown</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<MultiSelect id="multiselect" v-model="value9" :options="cities" optionLabel="name" />
<label for="multiselect">MultiSelect</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<Textarea id="textarea" v-model="value10" rows="3" />
<label for="textarea">Textarea</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<Password id="password" v-model="value11" />
<label for="password">Password</label>
</span>
</div>
</div>
</div>
</div>
</template>
<script>
import CountryService from '../service/CountryService';
import CountryService from './service/CountryService';
export default {
data() {
return {
@ -683,7 +446,243 @@ export default {
}, 250);
}
}
}`
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div>
<div class="card">
<div class="p-fluid p-grid">
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<InputText id="inputtext" type="text" v-model="value1" />
<label for="inputtext">InputText</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label p-input-icon-left">
<i class="pi pi-search" />
<InputText id="inputtext-left" type="text" v-model="valueIconLeft" />
<label for="inputtext-left">Left Icon</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label p-input-icon-right">
<i class="pi pi-search" />
<InputText id="inputtext-right" type="text" v-model="valueIconRight" />
<label for="inputtext-right">Right Icon</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
<label for="autocomplete">AutoComplete</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<Calendar id="calendar" v-model="value3" />
<label for="calendar">Calendar</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<Chips id="chips" v-model="value4" />
<label for="chips">Chips</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" />
<label for="inputmask">InputMask</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<InputNumber id="inputnumber" v-model="value6" />
<label for="inputnumber">InputNumber</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">
<i class="pi pi-user"></i>
</span>
<span class="p-float-label">
<InputText id="inputgroup" type="text" v-model="value7" />
<label for="inputgroup">InputGroup</label>
</span>
</div>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<CascadeSelect id="cascadeSelect" v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" />
<label for="multiselect">CascadeSelect</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<Dropdown id="dropdown" v-model="value8" :options="cities" optionLabel="name" />
<label for="dropdown">Dropdown</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<MultiSelect id="multiselect" v-model="value9" :options="cities" optionLabel="name" />
<label for="multiselect">MultiSelect</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<Textarea id="textarea" v-model="value10" rows="3" />
<label for="textarea">Textarea</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<Password id="password" v-model="value11" />
<label for="password">Password</label>
</span>
</div>
</div>
</div>
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
import CountryService from '../service/CountryService';
export default {
setup() {
onMounted(() => {
countryService.value.getCountries().then(data => countries.value = data);
})
const countryService = ref(new CountryService());
const countries = ref();
const filteredCountries = ref();
const cities = ref([
{name: 'New York', code: 'NY'},
{name: 'Rome', code: 'RM'},
{name: 'London', code: 'LDN'},
{name: 'Istanbul', code: 'IST'},
{name: 'Paris', code: 'PRS'}
]);
const value1 = ref();
const value2 = ref();
const value3 = ref();
const value4 = ref();
const value5 = ref();
const value6 = ref();
const value7 = ref();
const value8 = ref();
const value9 = ref();
const value10 = ref();
const value11 = ref();
const valueIconLeft = ref();
const valueIconRight = ref();
const selectedCity = ref();
const cascadeCountries = ref([
{
name: 'Australia',
code: 'AU',
states: [
{
name: 'New South Wales',
cities: [
{cname: 'Sydney', code: 'A-SY'},
{cname: 'Newcastle', code: 'A-NE'},
{cname: 'Wollongong', code: 'A-WO'}
]
},
{
name: 'Queensland',
cities: [
{cname: 'Brisbane', code: 'A-BR'},
{cname: 'Townsville', code: 'A-TO'}
]
},
]
},
{
name: 'Canada',
code: 'CA',
states: [
{
name: 'Quebec',
cities: [
{cname: 'Montreal', code: 'C-MO'},
{cname: 'Quebec City', code: 'C-QU'}
]
},
{
name: 'Ontario',
cities: [
{cname: 'Ottawa', code: 'C-OT'},
{cname: 'Toronto', code: 'C-TO'}
]
},
]
},
{
name: 'United States',
code: 'US',
states: [
{
name: 'California',
cities: [
{cname: 'Los Angeles', code: 'US-LA'},
{cname: 'San Diego', code: 'US-SD'},
{cname: 'San Francisco', code: 'US-SF'}
]
},
{
name: 'Florida',
cities: [
{cname: 'Jacksonville', code: 'US-JA'},
{cname: 'Miami', code: 'US-MI'},
{cname: 'Tampa', code: 'US-TA'},
{cname: 'Orlando', code: 'US-OR'}
]
},
{
name: 'Texas',
cities: [
{cname: 'Austin', code: 'US-AU'},
{cname: 'Dallas', code: 'US-DA'},
{cname: 'Houston', code: 'US-HO'}
]
}
]
}
]);
const searchCountry = (event) => {
setTimeout(() => {
if (!event.query.trim().length) {
this.filteredCountries = [...this.countries];
}
else {
this.filteredCountries = this.countries.filter((country) => {
return country.name.toLowerCase().startsWith(event.query.toLowerCase());
});
}
}, 250);
};
return { countryService, countries, filteredCountries, cities, value1, value2, value3, value4, value5, value6,
value7, value8, value9, value10, value11, valueIconLeft, valueIconRight, selectedCity, cascadeCountries, searchCountry }
}
}
<\\/script>
`
}
}
}
@ -708,9 +707,6 @@ export default {
}
}, 250);
}
},
components: {
LiveEditor
}
}
</script>

454
src/views/inputgroup/InputGroupDoc.vue
View File

@ -1,247 +1,115 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/inputgroup" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="InputGroupDemo" :sources="sources" :components="['InputText', 'Button', 'RadioButton', 'Checkbox']" />
</div>
<pre v-code><code><template v-pre>
&lt;h3&gt;Addons&lt;/h3&gt;
&lt;div class="p-grid p-fluid"&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;div class="p-inputgroup"&gt;
&lt;span class="p-inputgroup-addon"&gt;
&lt;i class="pi pi-user"&gt;&lt;/i&gt;
&lt;/span&gt;
&lt;InputText placeholder="Username" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;div class="p-inputgroup"&gt;
&lt;span class="p-inputgroup-addon"&gt;$&lt;/span&gt;
&lt;InputText placeholder="Price" /&gt;
&lt;span class="p-inputgroup-addon"&gt;.00&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;div class="p-inputgroup"&gt;
&lt;span class="p-inputgroup-addon"&gt;W&lt;/span&gt;
&lt;InputText placeholder="Website" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Multiple Addons&lt;/h3&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-col-12"&gt;
&lt;div class="p-inputgroup"&gt;
&lt;span class="p-inputgroup-addon"&gt;
&lt;i class="pi pi-clock"&gt;&lt;/i&gt;
&lt;/span&gt;
&lt;span class="p-inputgroup-addon"&gt;
&lt;i class="pi pi-star"&gt;&lt;/i&gt;
&lt;/span&gt;
&lt;InputText placeholder="Price" /&gt;
&lt;span class="p-inputgroup-addon"&gt;$&lt;/span&gt;
&lt;span class="p-inputgroup-addon"&gt;.00&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Button Addons&lt;/h3&gt;
&lt;div class="p-grid p-fluid"&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;div class="p-inputgroup"&gt;
&lt;Button label="Search"/&gt;
&lt;InputText placeholder="Keyword"/&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;div class="p-inputgroup"&gt;
&lt;InputText placeholder="Keyword"/&gt;
&lt;Button icon="pi pi-search" class="p-button-warning"/&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;div class="p-inputgroup"&gt;
&lt;Button icon="pi pi-check" class="p-button-success"/&gt;
&lt;InputText placeholder="Vote"/&gt;
&lt;Button icon="pi pi-times" class="p-button-danger"/&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Checkbox and RadioButton&lt;/h3&gt;
&lt;div class="p-grid p-fluid"&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;div class="p-inputgroup"&gt;
&lt;span class="p-inputgroup-addon"&gt;
&lt;Checkbox v-model="checked1" :binary="true" /&gt;
&lt;/span&gt;
&lt;InputText placeholder="Username"/&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;div class="p-inputgroup"&gt;
&lt;InputText placeholder="Price"/&gt;
&lt;span class="p-inputgroup-addon"&gt;
&lt;RadioButton name="rb1" value="rb1" v-model="radioValue1" /&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;div class="p-inputgroup"&gt;
&lt;span class="p-inputgroup-addon"&gt;
&lt;Checkbox v-model="checked2" :binary="true" /&gt;
&lt;/span&gt;
&lt;InputText placeholder="Website"/&gt;
&lt;span class="p-inputgroup-addon"&gt;
&lt;RadioButton name="rb2" value="rb2" v-model="radioValue2" /&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
checked1: false,
checked2: false,
radioValue1: '',
radioValue2: ''
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<AppDoc name="InputGroupDemo" :sources="sources" />
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Addons</h5>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">
<i class="pi pi-user"></i>
</span>
<InputText placeholder="Username" />
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">$</span>
<InputText placeholder="Price" />
<span class="p-inputgroup-addon">.00</span>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">W</span>
<InputText placeholder="Website" />
</div>
</div>
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<h5>Addons</h5>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">
<i class="pi pi-user"></i>
</span>
<InputText placeholder="Username" />
</div>
</div>
<h5>Multiple Addons</h5>
<div class="p-grid">
<div class="p-col-12">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">
<i class="pi pi-clock"></i>
</span>
<span class="p-inputgroup-addon">
<i class="pi pi-star"></i>
</span>
<InputText placeholder="Price" />
<span class="p-inputgroup-addon">$</span>
<span class="p-inputgroup-addon">.00</span>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">$</span>
<InputText placeholder="Price" />
<span class="p-inputgroup-addon">.00</span>
</div>
</div>
<h5>Button Addons</h5>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<Button label="Search"/>
<InputText placeholder="Keyword"/>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<InputText placeholder="Keyword"/>
<Button icon="pi pi-search" class="p-button-warning"/>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<Button icon="pi pi-check" class="p-button-success"/>
<InputText placeholder="Vote"/>
<Button icon="pi pi-times" class="p-button-danger"/>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">W</span>
<InputText placeholder="Website" />
</div>
</div>
</div>
<h5>Checkbox and RadioButton</h5>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-12">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">
<Checkbox v-model="checked1" :binary="true" />
</span>
<InputText placeholder="Username"/>
</div>
</div>
<h5>Multiple Addons</h5>
<div class="p-grid">
<div class="p-col-12">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">
<i class="pi pi-clock"></i>
</span>
<span class="p-inputgroup-addon">
<i class="pi pi-star"></i>
</span>
<InputText placeholder="Price" />
<span class="p-inputgroup-addon">$</span>
<span class="p-inputgroup-addon">.00</span>
</div>
</div>
</div>
<div class="p-col-12 p-md-12">
<div class="p-inputgroup">
<InputText placeholder="Price"/>
<span class="p-inputgroup-addon">
<RadioButton name="rb1" value="rb1" v-model="radioValue1" />
</span>
</div>
</div>
<h5>Button Addons</h5>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<Button label="Search"/>
<InputText placeholder="Keyword"/>
</div>
</div>
<div class="p-col-12 p-md-12">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">
<Checkbox v-model="checked2" :binary="true" />
</span>
<InputText placeholder="Website"/>
<span class="p-inputgroup-addon">
<RadioButton name="rb2" value="rb2" v-model="radioValue2" />
</span>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<InputText placeholder="Keyword"/>
<Button icon="pi pi-search" class="p-button-warning"/>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<Button icon="pi pi-check" class="p-button-success"/>
<InputText placeholder="Vote"/>
<Button icon="pi pi-times" class="p-button-danger"/>
</div>
</div>
</div>
<h5>Checkbox and RadioButton</h5>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-12">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">
<Checkbox v-model="checked1" :binary="true" />
</span>
<InputText placeholder="Username"/>
</div>
</div>
<div class="p-col-12 p-md-12">
<div class="p-inputgroup">
<InputText placeholder="Price"/>
<span class="p-inputgroup-addon">
<RadioButton name="rb1" value="rb1" v-model="radioValue1" />
</span>
</div>
</div>
<div class="p-col-12 p-md-12">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">
<Checkbox v-model="checked2" :binary="true" />
</span>
<InputText placeholder="Website"/>
<span class="p-inputgroup-addon">
<RadioButton name="rb2" value="rb2" v-model="radioValue2" />
</span>
</div>
</div>
</div>
@ -258,13 +126,135 @@ export default {
radioValue2: ''
}
}
}`
}
<\\/script>`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<h5>Addons</h5>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">
<i class="pi pi-user"></i>
</span>
<InputText placeholder="Username" />
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">$</span>
<InputText placeholder="Price" />
<span class="p-inputgroup-addon">.00</span>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">W</span>
<InputText placeholder="Website" />
</div>
</div>
</div>
<h5>Multiple Addons</h5>
<div class="p-grid">
<div class="p-col-12">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">
<i class="pi pi-clock"></i>
</span>
<span class="p-inputgroup-addon">
<i class="pi pi-star"></i>
</span>
<InputText placeholder="Price" />
<span class="p-inputgroup-addon">$</span>
<span class="p-inputgroup-addon">.00</span>
</div>
</div>
</div>
<h5>Button Addons</h5>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<Button label="Search"/>
<InputText placeholder="Keyword"/>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<InputText placeholder="Keyword"/>
<Button icon="pi pi-search" class="p-button-warning"/>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<Button icon="pi pi-check" class="p-button-success"/>
<InputText placeholder="Vote"/>
<Button icon="pi pi-times" class="p-button-danger"/>
</div>
</div>
</div>
<h5>Checkbox and RadioButton</h5>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-12">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">
<Checkbox v-model="checked1" :binary="true" />
</span>
<InputText placeholder="Username"/>
</div>
</div>
<div class="p-col-12 p-md-12">
<div class="p-inputgroup">
<InputText placeholder="Price"/>
<span class="p-inputgroup-addon">
<RadioButton name="rb1" value="rb1" v-model="radioValue1" />
</span>
</div>
</div>
<div class="p-col-12 p-md-12">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">
<Checkbox v-model="checked2" :binary="true" />
</span>
<InputText placeholder="Website"/>
<span class="p-inputgroup-addon">
<RadioButton name="rb2" value="rb2" v-model="radioValue2" />
</span>
</div>
</div>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const checked1 = ref(false);
const checked2 = ref(false);
const radioValue1 = ref('');
const radioValue2 = ref('');
return { checked1, checked2, radioValue1, radioValue2 }
}
}
<\\/script>`
}
}
}
},
components: {
LiveEditor
}
}
</script>

371
src/views/inputmask/InputMaskDoc.vue
View File

@ -1,232 +1,166 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="InputMaskDoc" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import InputMask from 'primevue/inputmask';
</code></pre>
<h5>Getting Started</h5>
<p>A model can be bound using the standard v-model directive.</p>
<h5>Getting Started</h5>
<p>A model can be bound using the standard v-model directive.</p>
<pre v-code><code>
&lt;InputMask v-model="value" mask="99-999999" /&gt;
</code></pre>
<h5>Mask</h5>
<p>Mask format can be a combination of the the following built-in definitions.</p>
<h5>Mask</h5>
<p>Mask format can be a combination of the the following built-in definitions.</p>
<ul>
<li>
a - Alpha character (A-Z,a-z)
</li>
<li>
9 - Numeric character (0-9)
</li>
<li>
* - Alpha numberic character (A-Z,a-z,0-9)
</li>
</ul>
<ul>
<li>
a - Alpha character (A-Z,a-z)
</li>
<li>
9 - Numeric character (0-9)
</li>
<li>
* - Alpha numberic character (A-Z,a-z,0-9)
</li>
</ul>
<pre v-code><code>
&lt;InputMask v-model="value" mask="a*-999-a999" /&gt;
</code></pre>
<h5>SlotChar</h5>
<p>Underscore is the default placeholder for a mask and this can be customized using <i>slotChart</i> option.</p>
<h5>SlotChar</h5>
<p>Underscore is the default placeholder for a mask and this can be customized using <i>slotChart</i> option.</p>
<pre v-code><code>
&lt;InputMask v-model="value" mask="99/99/9999" slotChar="mm/dd/yyyy" /&gt;
</code></pre>
<h5>Optional Values</h5>
<p>If the input does not complete the mask definition, it is cleared by default.
Use <i>autoClear</i> property to control this behavior. In addition, certain part of
a mask can be made optional by using ? symbol where anything after the question
mark becomes optional.</p>
<h5>Optional Values</h5>
<p>If the input does not complete the mask definition, it is cleared by default.
Use <i>autoClear</i> property to control this behavior. In addition, certain part of
a mask can be made optional by using ? symbol where anything after the question
mark becomes optional.</p>
<pre v-code><code>
&lt;InputMask v-model="value" mask="(999) 999-9999? x99999" /&gt;
</code></pre>
<h5>Properties</h5>
<p>InputText passes any valid attribute to the underlying input element. In addition;</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>mask</td>
<td>string</td>
<td>null</td>
<td>Mask pattern.</td>
</tr>
<tr>
<td>slotChar</td>
<td>string</td>
<td>-</td>
<td>Placeholder character in mask, default is underscore.</td>
</tr>
<tr>
<td>autoClear</td>
<td>boolean</td>
<td>true</td>
<td>Clears the incomplete value on blur.</td>
</tr>
<tr>
<td>unmask</td>
<td>boolean</td>
<td>false</td>
<td>Defines if model sets the raw unmasked value to bound value or the formatted mask value.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>InputText passes any valid attribute to the underlying input element. In addition;</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>mask</td>
<td>string</td>
<td>null</td>
<td>Mask pattern.</td>
</tr>
<tr>
<td>slotChar</td>
<td>string</td>
<td>-</td>
<td>Placeholder character in mask, default is underscore.</td>
</tr>
<tr>
<td>autoClear</td>
<td>boolean</td>
<td>true</td>
<td>Clears the incomplete value on blur.</td>
</tr>
<tr>
<td>unmask</td>
<td>boolean</td>
<td>false</td>
<td>Defines if model sets the raw unmasked value to bound value or the formatted mask value.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
<h5>Events</h5>
<p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-inputmask p-inputtext</td>
<td>Input element</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-inputmask p-inputtext</td>
<td>Input element</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/inputtext" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="InputMaskDemo" :sources="sources"/>
</div>
<pre v-code><code><template v-pre>
&lt;div class="p-fluid p-formgrid p-grid"&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;label for="basic"&gt;Basic&lt;/label&gt;
&lt;InputMask mask="99-999999" v-model="val1" placeholder="99-999999" /&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;label for="ssn"&gt;SSN&lt;/label&gt;
&lt;InputMask mask="999-99-9999" v-model="val2" placeholder="999-99-9999" /&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;label for="date"&gt;Date&lt;/label&gt;
&lt;InputMask mask="99/99/9999" v-model="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy" /&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;label for="Phone"&gt;Phone&lt;/label&gt;
&lt;InputMask mask="(999) 999-9999" v-model="val4" placeholder="(999) 999-9999" /&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;label for="phoneext"&gt;Phone Ext&lt;/label&gt;
&lt;InputMask mask="(999) 999-9999? x99999" v-model="val5" placeholder="(999) 999-9999? x99999"/&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;label for="serial"&gt;Serial&lt;/label&gt;
&lt;InputMask mask="a*-999-a999" v-model="val6" placeholder="a*-999-a999" /&gt;
&lt;/div&gt;
&lt;/div&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
val1: null,
val2: null,
val3: null,
val4: null,
val5: null,
val6: null
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<div class="p-fluid p-formgrid p-grid">
<div class="p-field p-col-12 p-md-4">
<label for="basic">Basic</label>
<InputMask mask="99-999999" v-model="val1" placeholder="99-999999" />
</div>
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<div class="p-fluid p-formgrid p-grid">
<div class="p-field p-col-12 p-md-4">
<label for="basic">Basic</label>
<InputMask mask="99-999999" v-model="val1" placeholder="99-999999" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="ssn">SSN</label>
<InputMask mask="999-99-9999" v-model="val2" placeholder="999-99-9999" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="ssn">SSN</label>
<InputMask mask="999-99-9999" v-model="val2" placeholder="999-99-9999" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="date">Date</label>
<InputMask mask="99/99/9999" v-model="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="date">Date</label>
<InputMask mask="99/99/9999" v-model="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="Phone">Phone</label>
<InputMask mask="(999) 999-9999" v-model="val4" placeholder="(999) 999-9999" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="Phone">Phone</label>
<InputMask mask="(999) 999-9999" v-model="val4" placeholder="(999) 999-9999" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="phoneext">Phone Ext</label>
<InputMask mask="(999) 999-9999? x99999" v-model="val5" placeholder="(999) 999-9999? x99999"/>
</div>
<div class="p-field p-col-12 p-md-4">
<label for="phoneext">Phone Ext</label>
<InputMask mask="(999) 999-9999? x99999" v-model="val5" placeholder="(999) 999-9999? x99999"/>
</div>
<div class="p-field p-col-12 p-md-4">
<label for="serial">Serial</label>
<InputMask mask="a*-999-a999" v-model="val6" placeholder="a*-999-a999" />
</div>
</div>
<div class="p-field p-col-12 p-md-4">
<label for="serial">Serial</label>
<InputMask mask="a*-999-a999" v-model="val6" placeholder="a*-999-a999" />
</div>
</div>
</div>
@ -245,13 +179,68 @@ export default {
}
}
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div class="p-fluid p-formgrid p-grid">
<div class="p-field p-col-12 p-md-4">
<label for="basic">Basic</label>
<InputMask mask="99-999999" v-model="val1" placeholder="99-999999" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="ssn">SSN</label>
<InputMask mask="999-99-9999" v-model="val2" placeholder="999-99-9999" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="date">Date</label>
<InputMask mask="99/99/9999" v-model="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="Phone">Phone</label>
<InputMask mask="(999) 999-9999" v-model="val4" placeholder="(999) 999-9999" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="phoneext">Phone Ext</label>
<InputMask mask="(999) 999-9999? x99999" v-model="val5" placeholder="(999) 999-9999? x99999"/>
</div>
<div class="p-field p-col-12 p-md-4">
<label for="serial">Serial</label>
<InputMask mask="a*-999-a999" v-model="val6" placeholder="a*-999-a999" />
</div>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const val1 = ref();
const val2 = ref();
const val3 = ref();
const val4 = ref();
const val5 = ref();
const val6 = ref();
return { val1, val2, val3, val4, val5, val6 }
}
}
<\\/script>
`
}
}
}
},
components: {
LiveEditor
}
}
</script>

1012
src/views/inputnumber/InputNumberDoc.vue
View File

File diff suppressed because it is too large Load Diff

201
src/views/inputswitch/InputSwitchDoc.vue
View File

@ -1,15 +1,13 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="InputSwitchDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import InputSwitch from 'primevue/inputswitch';
</code></pre>
<h5>Getting Started</h5>
<p>Two-way binding to a boolean property is defined using the standard v-model directive.</p>
<h5>Getting Started</h5>
<p>Two-way binding to a boolean property is defined using the standard v-model directive.</p>
<pre v-code><code>
&lt;InputSwitch v-model="checked" /&gt;
@ -26,7 +24,7 @@ export default {
</code></pre>
<p>As model is two-way binding enabled, setting the bound value as true displays the state as checked by default.</p>
<p>As model is two-way binding enabled, setting the bound value as true displays the state as checked by default.</p>
<pre v-code.script><code>
export default {
@ -39,113 +37,79 @@ export default {
</code></pre>
<h5>Properties</h5>
<p>Any property such as name and placeholder are passed to the underlying input element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>boolean</td>
<td>null</td>
<td>Specifies whether a inputswitch should be checked or not.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property such as name and placeholder are passed to the underlying input element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>boolean</td>
<td>null</td>
<td>Specifies whether a inputswitch should be checked or not.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<p>Any valid event such as focus, blur and input are passed to the underlying input element. Following are the additional events to configure the component.</p>
<h5>Events</h5>
<p>Any valid event such as focus, blur and input are passed to the underlying input element. Following are the additional events to configure the component.</p>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-inputswitch</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-inputswitch-checked</td>
<td>Container element in active state.</td>
</tr>
<tr>
<td>p-inputswitch-slider</td>
<td>Slider element behind the handle.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-inputswitch</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-inputswitch-checked</td>
<td>Container element in active state.</td>
</tr>
<tr>
<td>p-inputswitch-slider</td>
<td>Slider element behind the handle.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/inputswitch" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="InputSwitchDemo" :sources="sources"/>
</div>
<pre v-code><code><template v-pre>
&lt;h3&gt;Basic&lt;/h3&gt;
&lt;InputSwitch v-model="checked1" /&gt;
&lt;h3&gt;Preselection&lt;/h3&gt;
&lt;InputSwitch v-model="checked2" /&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
checked1: false,
checked2: true
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Basic</h5>
<InputSwitch v-model="checked1" />
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<h5>Basic</h5>
<InputSwitch v-model="checked1" />
<h5>Preselection</h5>
<InputSwitch v-model="checked2" />
</div>
</div>
<h5>Preselection</h5>
<InputSwitch v-model="checked2" />
</div>
</template>
@ -158,13 +122,38 @@ export default {
}
}
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<h5>Basic</h5>
<InputSwitch v-model="checked1" />
<h5>Preselection</h5>
<InputSwitch v-model="checked2" />
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const checked1 = ref(false);
const checked2 = ref(true);
return { checked1, checked2 }
}
}
<\\/script>
`
}
}
}
},
components: {
LiveEditor
}
}
</script>

410
src/views/inputtext/InputTextDoc.vue
View File

@ -1,22 +1,20 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="InputTextDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import InputText from 'primevue/inputtext';
</code></pre>
<h5>Getting Started</h5>
<p>A model can be bound using the standard v-model directive.</p>
<h5>Getting Started</h5>
<p>A model can be bound using the standard v-model directive.</p>
<pre v-code><code>
&lt;InputText type="text" v-model="value" /&gt;
</code></pre>
<h5>Float Label</h5>
<p>A floating label is implemented by wrapping the input and the label inside a container having <i>.p-float-label</i> style class.</p>
<h5>Float Label</h5>
<p>A floating label is implemented by wrapping the input and the label inside a container having <i>.p-float-label</i> style class.</p>
<pre v-code><code>
&lt;span class="p-float-label"&gt;
&lt;InputText id="username" type="text" v-model="value" /&gt;
@ -25,9 +23,9 @@ import InputText from 'primevue/inputtext';
</code></pre>
<h5>Icons</h5>
<p>An icon can be integrated within an input field by wrapping the input and the icon with an element having <i>p-input-icon-right</i>
and <i>p-input-icon-left</i> classes depending on the icon location.</p>
<h5>Icons</h5>
<p>An icon can be integrated within an input field by wrapping the input and the icon with an element having <i>p-input-icon-right</i>
and <i>p-input-icon-left</i> classes depending on the icon location.</p>
<pre v-code><code>
&lt;span class="p-input-icon-left"&gt;
&lt;i class="pi pi-search" /&gt;
@ -47,9 +45,9 @@ import InputText from 'primevue/inputtext';
</code></pre>
<h5>Sizes</h5>
<p>2 more sizes are available in addition to a regular input, for a smaller input add <i>p-inputtext-sm</i> and for a larger one, use <i>p-inputtext-lg</i>.
Note that these classes are mainly be used to change the size of a particular field, for global scaling see the <router-link to="/theming">theming</router-link> page.</p>
<h5>Sizes</h5>
<p>2 more sizes are available in addition to a regular input, for a smaller input add <i>p-inputtext-sm</i> and for a larger one, use <i>p-inputtext-lg</i>.
Note that these classes are mainly be used to change the size of a particular field, for global scaling see the <router-link to="/theming">theming</router-link> page.</p>
<pre v-code><code>
&lt;InputText type="text" class="p-inputtext-sm" placeholder="Small" /&gt;
&lt;InputText type="text" placeholder="Normal" /&gt;
@ -57,8 +55,8 @@ import InputText from 'primevue/inputtext';
</code></pre>
<p>Instead of repeating the scale classes for each input, sizing can also be applied to a group by adding the
class to a container element so that descendant inputs share the same style easier.</p>
<p>Instead of repeating the scale classes for each input, sizing can also be applied to a group by adding the
class to a container element so that descendant inputs share the same style easier.</p>
<pre v-code><code>
&lt;div class="p-inputtext-sm"&gt;
&lt;InputText /&gt;
@ -68,10 +66,10 @@ import InputText from 'primevue/inputtext';
</code></pre>
<h5>Outlined vs Filled</h5>
<p>Input fields come in two styles, default is <i>outlined</i> with borders around the field whereas <i>filled</i> alternative adds a background color
to the field. Applying <i>p-input-filled</i> to an ancestor of an input enables the filled style. If you prefer
to use filled inputs in the entire application, use a global container such as document body or the application element to apply the style class.</p>
<h5>Outlined vs Filled</h5>
<p>Input fields come in two styles, default is <i>outlined</i> with borders around the field whereas <i>filled</i> alternative adds a background color
to the field. Applying <i>p-input-filled</i> to an ancestor of an input enables the filled style. If you prefer
to use filled inputs in the entire application, use a global container such as document body or the application element to apply the style class.</p>
<pre v-code><code>
&lt;div class="p-input-filled"&gt;
@ -82,201 +80,123 @@ import InputText from 'primevue/inputtext';
</code></pre>
<h5>Properties</h5>
<p>InputText passes any valid attribute to the underlying input element, additional attribute is the following.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>InputText passes any valid attribute to the underlying input element, additional attribute is the following.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
<h5>Events</h5>
<p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-inputtext</td>
<td>Input element</td>
</tr>
<tr>
<td>p-inputtext-sm</td>
<td>Smaller input element</td>
</tr>
<tr>
<td>p-inputtext-lg</td>
<td>Larger input element</td>
</tr>
<tr>
<td>p-inputtext-filled</td>
<td>Filled input style.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-inputtext</td>
<td>Input element</td>
</tr>
<tr>
<td>p-inputtext-sm</td>
<td>Smaller input element</td>
</tr>
<tr>
<td>p-inputtext-lg</td>
<td>Larger input element</td>
</tr>
<tr>
<td>p-inputtext-filled</td>
<td>Filled input style.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/inputtext" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="InputTextDemo" :sources="sources" />
</div>
<pre v-code><code><template v-pre>
&lt;div class="card"&gt;
&lt;h5&gt;Basic&lt;/h5&gt;
&lt;InputText type="text" v-model="value1" /&gt;
&lt;span :style="{marginLeft: '.5em'}"&gt;{{value1}}&lt;/span&gt;
&lt;h5&gt;Floating Label&lt;/h5&gt;
&lt;span class="p-float-label"&gt;
&lt;InputText id="username" type="text" v-model="value2" /&gt;
&lt;label for="username"&gt;Username&lt;/label&gt;
&lt;/span&gt;
&lt;h5&gt;Left Icon&lt;/h5&gt;
&lt;span class="p-input-icon-left"&gt;
&lt;i class="pi pi-search" /&gt;
&lt;InputText type="text" v-model="value3" placeholder="Search" /&gt;
&lt;/span&gt;
&lt;h5&gt;Right Icon&lt;/h5&gt;
&lt;span class="p-input-icon-right"&gt;
&lt;i class="pi pi-spin pi-spinner" /&gt;
&lt;InputText type="text" v-model="value4" /&gt;
&lt;/span&gt;
&lt;h5&gt;Help Text&lt;/h5&gt;
&lt;div class="p-field"&gt;
&lt;label for="username1"&gt;Username&lt;/label&gt;
&lt;InputText id="username1" type="username" aria-describedby="username1-help" /&gt;
&lt;small id="username1-help"&gt;Enter your username to reset your password.&lt;/small&gt;
&lt;/div&gt;
&lt;h5&gt;Invalid&lt;/h5&gt;
&lt;div class="p-field"&gt;
&lt;label for="username2"&gt;Username&lt;/label&gt;
&lt;InputText id="username2" type="username" aria-describedby="username2-help" class="p-invalid" /&gt;
&lt;small id="username2-help" class="p-error"&gt;Username is not available.&lt;/small&gt;
&lt;/div&gt;
&lt;h5&gt;Disabled&lt;/h5&gt;
&lt;InputText type="text" v-model="value5" disabled /&gt;
&lt;h5&gt;Sizes&lt;/h5&gt;
&lt;div class="sizes"&gt;
&lt;InputText type="text" class="p-inputtext-sm" placeholder="Small" /&gt;
&lt;InputText type="text" placeholder="Normal" /&gt;
&lt;InputText type="text" class="p-inputtext-lg" placeholder="Large" /&gt;
&lt;/div&gt;
&lt;/div&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
value1: null,
value2: null,
value3: null,
value4: null,
value5: 'PrimeVue'
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content:`<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Basic</h5>
<InputText type="text" v-model="value1" />
<span :style="{marginLeft: '.5em'}">{{value1}}</span>
'options-api': {
tabName: 'Source',
content:`
<template>
<div class="card">
<h5>Basic</h5>
<InputText type="text" v-model="value1" />
<span :style="{marginLeft: '.5em'}">{{value1}}</span>
<h5>Floating Label</h5>
<span class="p-float-label">
<InputText id="username" type="text" v-model="value2" />
<label for="username">Username</label>
</span>
<h5>Floating Label</h5>
<span class="p-float-label">
<InputText id="username" type="text" v-model="value2" />
<label for="username">Username</label>
</span>
<h5>Left Icon</h5>
<span class="p-input-icon-left">
<i class="pi pi-search" />
<InputText type="text" v-model="value3" placeholder="Search" />
</span>
<h5>Left Icon</h5>
<span class="p-input-icon-left">
<i class="pi pi-search" />
<InputText type="text" v-model="value3" placeholder="Search" />
</span>
<h5>Right Icon</h5>
<span class="p-input-icon-right">
<i class="pi pi-spin pi-spinner" />
<InputText type="text" v-model="value4" />
</span>
<h5>Right Icon</h5>
<span class="p-input-icon-right">
<i class="pi pi-spin pi-spinner" />
<InputText type="text" v-model="value4" />
</span>
<h5>Help Text</h5>
<div class="p-field">
<label for="username1">Username</label>
<InputText id="username1" type="username" aria-describedby="username1-help" />
<small id="username1-help">Enter your username to reset your password.</small>
</div>
<h5>Help Text</h5>
<div class="p-field">
<label for="username1">Username</label>
<InputText id="username1" type="username" aria-describedby="username1-help" />
<small id="username1-help">Enter your username to reset your password.</small>
</div>
<h5>Invalid</h5>
<div class="p-field">
<label for="username2">Username</label>
<InputText id="username2" type="username" aria-describedby="username2-help" class="p-invalid" />
<small id="username2-help" class="p-error">Username is not available.</small>
</div>
<h5>Invalid</h5>
<div class="p-field">
<label for="username2">Username</label>
<InputText id="username2" type="username" aria-describedby="username2-help" class="p-invalid" />
<small id="username2-help" class="p-error">Username is not available.</small>
</div>
<h5>Disabled</h5>
<InputText type="text" v-model="value5" disabled />
<h5>Disabled</h5>
<InputText type="text" v-model="value5" disabled />
<h5>Sizes</h5>
<div class="sizes">
<InputText type="text" class="p-inputtext-sm" placeholder="Small" />
<InputText type="text" placeholder="Normal" />
<InputText type="text" class="p-inputtext-lg" placeholder="Large" />
</div>
</div>
<h5>Sizes</h5>
<div class="sizes">
<InputText type="text" class="p-inputtext-sm" placeholder="Small" />
<InputText type="text" placeholder="Normal" />
<InputText type="text" class="p-inputtext-lg" placeholder="Large" />
</div>
</div>
</template>
@ -293,8 +213,95 @@ export default {
}
}
}
`,
style: `<style lang="scss" scoped>
<\\/script>
<style lang="scss" scoped>
.sizes {
.p-inputtext {
display: block;
margin-bottom: .5rem;
&:last-child {
margin-bottom: 0;
}
}
}
.p-field * {
display: block;
}
</style>`
},
'composition-api': {
tabName: 'Composition API',
content:`
<template>
<div class="card">
<h5>Basic</h5>
<InputText type="text" v-model="value1" />
<span :style="{marginLeft: '.5em'}">{{value1}}</span>
<h5>Floating Label</h5>
<span class="p-float-label">
<InputText id="username" type="text" v-model="value2" />
<label for="username">Username</label>
</span>
<h5>Left Icon</h5>
<span class="p-input-icon-left">
<i class="pi pi-search" />
<InputText type="text" v-model="value3" placeholder="Search" />
</span>
<h5>Right Icon</h5>
<span class="p-input-icon-right">
<i class="pi pi-spin pi-spinner" />
<InputText type="text" v-model="value4" />
</span>
<h5>Help Text</h5>
<div class="p-field">
<label for="username1">Username</label>
<InputText id="username1" type="username" aria-describedby="username1-help" />
<small id="username1-help">Enter your username to reset your password.</small>
</div>
<h5>Invalid</h5>
<div class="p-field">
<label for="username2">Username</label>
<InputText id="username2" type="username" aria-describedby="username2-help" class="p-invalid" />
<small id="username2-help" class="p-error">Username is not available.</small>
</div>
<h5>Disabled</h5>
<InputText type="text" v-model="value5" disabled />
<h5>Sizes</h5>
<div class="sizes">
<InputText type="text" class="p-inputtext-sm" placeholder="Small" />
<InputText type="text" placeholder="Normal" />
<InputText type="text" class="p-inputtext-lg" placeholder="Large" />
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const value1 = ref();
const value2 = ref();
const value3 = ref();
const value4 = ref();
const value5 = ref('PrimeVue');
return { value1, value2, value3, value4, value5 }
}
}
<\\/script>
<style lang="scss" scoped>
.sizes {
.p-inputtext {
display: block;
@ -313,9 +320,6 @@ export default {
}
}
}
},
components: {
LiveEditor
}
}
</script>

443
src/views/invalid/InvalidDemo.vue
View File

@ -49,189 +49,12 @@
</div>
</div>
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<div class="p-d-flex p-jc-end">
<LiveEditor name="InvalidDemo" :sources="sources" service="CountryService" data="countries" :components="['InputText', 'AutoComplete', 'Calendar', 'Chips', 'InputMask', 'InputNumber', 'CascadeSelect', 'Dropdown', 'MultiSelect', 'Textarea']" />
</div>
<pre v-code><code><template v-pre>
&lt;div class="p-fluid p-grid"&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;InputText id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid" /&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" placeholder="AutoComplete" class="p-invalid" /&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;Calendar id="calendar" v-model="value3" placeholder="Calendar" class="p-invalid" :showIcon="true" /&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;Chips id="chips" v-model="value4" placeholder="Chips" class="p-invalid" /&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" placeholder="InputMask" class="p-invalid" /&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;InputNumber id="inputnumber" v-model="value6" placeholder="InputNumber" class="p-invalid" /&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;CascadeSelect v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" placeholder="CascadeSelect" class="p-invalid" /&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;Dropdown id="dropdown" v-model="value7" :options="cities" optionLabel="name" placeholder="Dropdown" class="p-invalid" /&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" placeholder="MultiSelect" class="p-invalid" /&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;Textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid" /&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;Password id="password" v-model="value10" placeholder="Password" class="p-invalid" /&gt;
&lt;/div&gt;
&lt;/div&gt;
</template>
</code></pre>
<pre v-code.script><code>
import CountryService from '../../service/CountryService';
export default {
data() {
return {
countries: null,
filteredCountries: null,
cities: [
{name: 'New York', code: 'NY'},
{name: 'Rome', code: 'RM'},
{name: 'London', code: 'LDN'},
{name: 'Istanbul', code: 'IST'},
{name: 'Paris', code: 'PRS'}
],
value1: null,
value2: null,
value3: null,
value4: null,
value5: null,
value6: null,
value7: null,
value8: null,
value9: null,
value10: null,
selectedCity: null,
cascadeCountries: [
{
name: 'Australia',
code: 'AU',
states: [
{
name: 'New South Wales',
cities: [
{cname: 'Sydney', code: 'A-SY'},
{cname: 'Newcastle', code: 'A-NE'},
{cname: 'Wollongong', code: 'A-WO'}
]
},
{
name: 'Queensland',
cities: [
{cname: 'Brisbane', code: 'A-BR'},
{cname: 'Townsville', code: 'A-TO'}
]
},
]
},
{
name: 'Canada',
code: 'CA',
states: [
{
name: 'Quebec',
cities: [
{cname: 'Montreal', code: 'C-MO'},
{cname: 'Quebec City', code: 'C-QU'}
]
},
{
name: 'Ontario',
cities: [
{cname: 'Ottawa', code: 'C-OT'},
{cname: 'Toronto', code: 'C-TO'}
]
},
]
},
{
name: 'United States',
code: 'US',
states: [
{
name: 'California',
cities: [
{cname: 'Los Angeles', code: 'US-LA'},
{cname: 'San Diego', code: 'US-SD'},
{cname: 'San Francisco', code: 'US-SF'}
]
},
{
name: 'Florida',
cities: [
{cname: 'Jacksonville', code: 'US-JA'},
{cname: 'Miami', code: 'US-MI'},
{cname: 'Tampa', code: 'US-TA'},
{cname: 'Orlando', code: 'US-OR'}
]
},
{
name: 'Texas',
cities: [
{cname: 'Austin', code: 'US-AU'},
{cname: 'Dallas', code: 'US-DA'},
{cname: 'Houston', code: 'US-HO'}
]
}
]
}
]
}
},
countryService: null,
created() {
this.countryService = new CountryService();
},
mounted() {
this.countryService.getCountries().then(data => this.countries = data);
},
methods: {
searchCountry(event) {
setTimeout(() => {
if (!event.query.trim().length) {
this.filteredCountries = [...this.countries];
}
else {
this.filteredCountries = this.countries.filter((country) => {
return country.name.toLowerCase().startsWith(event.query.toLowerCase());
});
}
}, 250);
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<AppDoc name="InvalidDemo" :sources="sources" service="CountryService" data="countries" />
</div>
</template>
<script>
import CountryService from '../../service/CountryService';
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
@ -333,53 +156,53 @@ export default {
}
],
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<div class="p-fluid p-grid">
<div class="p-field p-col-12 p-md-4">
<InputText id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" placeholder="AutoComplete" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<Calendar id="calendar" v-model="value3" placeholder="Calendar" class="p-invalid" :showIcon="true" />
</div>
<div class="p-field p-col-12 p-md-4">
<Chips id="chips" v-model="value4" placeholder="Chips" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" placeholder="InputMask" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<InputNumber id="inputnumber" v-model="value6" placeholder="InputNumber" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<CascadeSelect v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" placeholder="CascadeSelect" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<Dropdown id="dropdown" v-model="value7" :options="cities" optionLabel="name" placeholder="Dropdown" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" placeholder="MultiSelect" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<Textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<Password id="password" v-model="value10" placeholder="Password" class="p-invalid" />
</div>
</div>
'options-api': {
tabName :'Source',
content: `
<template>
<div class="card">
<div class="p-fluid p-grid">
<div class="p-field p-col-12 p-md-4">
<InputText id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" placeholder="AutoComplete" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<Calendar id="calendar" v-model="value3" placeholder="Calendar" class="p-invalid" :showIcon="true" />
</div>
<div class="p-field p-col-12 p-md-4">
<Chips id="chips" v-model="value4" placeholder="Chips" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" placeholder="InputMask" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<InputNumber id="inputnumber" v-model="value6" placeholder="InputNumber" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<CascadeSelect v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" placeholder="CascadeSelect" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<Dropdown id="dropdown" v-model="value7" :options="cities" optionLabel="name" placeholder="Dropdown" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" placeholder="MultiSelect" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<Textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<Password id="password" v-model="value10" placeholder="Password" class="p-invalid" />
</div>
</div>
</div>
</div>
</template>
<script>
import CountryService from '../service/CountryService';
import CountryService from './service/CountryService';
export default {
data() {
return {
@ -502,7 +325,180 @@ export default {
}, 250);
}
}
}`
}
<\\/script>
`
},
'composition-api': {
tabName :'Composition API',
content: `
<template>
<div class="card">
<div class="p-fluid p-grid">
<div class="p-field p-col-12 p-md-4">
<InputText id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" placeholder="AutoComplete" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<Calendar id="calendar" v-model="value3" placeholder="Calendar" class="p-invalid" :showIcon="true" />
</div>
<div class="p-field p-col-12 p-md-4">
<Chips id="chips" v-model="value4" placeholder="Chips" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" placeholder="InputMask" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<InputNumber id="inputnumber" v-model="value6" placeholder="InputNumber" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<CascadeSelect v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" placeholder="CascadeSelect" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<Dropdown id="dropdown" v-model="value7" :options="cities" optionLabel="name" placeholder="Dropdown" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" placeholder="MultiSelect" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<Textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<Password id="password" v-model="value10" placeholder="Password" class="p-invalid" />
</div>
</div>
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
import CountryService from './service/CountryService';
export default {
setup() {
onMounted(() => {
countryService.value.getCountries().then(data => countries.value = data);
})
const countryService = ref(new CountryService());
const countries = ref();
const filteredCountries = ref();
const cities = ref([
{name: 'New York', code: 'NY'},
{name: 'Rome', code: 'RM'},
{name: 'London', code: 'LDN'},
{name: 'Istanbul', code: 'IST'},
{name: 'Paris', code: 'PRS'}
]);
const value1 = ref();
const value2 = ref();
const value3 = ref();
const value4 = ref();
const value5 = ref();
const value6 = ref();
const value7 = ref();
const value8 = ref();
const value9 = ref();
const value10 = ref();
const selectedCity = ref();
const cascadeCountries = ref([
{
name: 'Australia',
code: 'AU',
states: [
{
name: 'New South Wales',
cities: [
{cname: 'Sydney', code: 'A-SY'},
{cname: 'Newcastle', code: 'A-NE'},
{cname: 'Wollongong', code: 'A-WO'}
]
},
{
name: 'Queensland',
cities: [
{cname: 'Brisbane', code: 'A-BR'},
{cname: 'Townsville', code: 'A-TO'}
]
},
]
},
{
name: 'Canada',
code: 'CA',
states: [
{
name: 'Quebec',
cities: [
{cname: 'Montreal', code: 'C-MO'},
{cname: 'Quebec City', code: 'C-QU'}
]
},
{
name: 'Ontario',
cities: [
{cname: 'Ottawa', code: 'C-OT'},
{cname: 'Toronto', code: 'C-TO'}
]
},
]
},
{
name: 'United States',
code: 'US',
states: [
{
name: 'California',
cities: [
{cname: 'Los Angeles', code: 'US-LA'},
{cname: 'San Diego', code: 'US-SD'},
{cname: 'San Francisco', code: 'US-SF'}
]
},
{
name: 'Florida',
cities: [
{cname: 'Jacksonville', code: 'US-JA'},
{cname: 'Miami', code: 'US-MI'},
{cname: 'Tampa', code: 'US-TA'},
{cname: 'Orlando', code: 'US-OR'}
]
},
{
name: 'Texas',
cities: [
{cname: 'Austin', code: 'US-AU'},
{cname: 'Dallas', code: 'US-DA'},
{cname: 'Houston', code: 'US-HO'}
]
}
]
}
]);
const searchCountry = (event) => {
setTimeout(() => {
if (!event.query.trim().length) {
filteredCountries.value = [...countries.value];
}
else {
filteredCountries.value = countries.value.filter((country) => {
return country.name.toLowerCase().startsWith(event.query.toLowerCase());
});
}
}, 250);
}
return { countryService, countries, filteredCountries, cities, value1, value2, value3, value4,
value5, value6, value7, value8, value9, value10, selectedCity, cascadeCountries, searchCountry }
}
}
<\\/script>
`
}
}
}
@ -527,9 +523,6 @@ export default {
}
}, 250);
}
},
components: {
LiveEditor
}
}
</script>

549
src/views/knob/KnobDoc.vue
View File

@ -1,15 +1,13 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="KnobDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import Knob from 'primevue/knob';
</code></pre>
<h5>Getting Started</h5>
<p>Knob is an input component and used with the standard <i>v-model</i> directive.</p>
<h5>Getting Started</h5>
<p>Knob is an input component and used with the standard <i>v-model</i> directive.</p>
<pre v-code><code>
&lt;Knob v-model="value" /&gt;
@ -23,306 +21,232 @@ data() {
</code></pre>
<h5>Minimum and Maximum</h5>
<p>Boundaries are configured with the <i>min</i> and <i>max</i> values whose defaults are 0 and 100 respectively.</p>
<h5>Minimum and Maximum</h5>
<p>Boundaries are configured with the <i>min</i> and <i>max</i> values whose defaults are 0 and 100 respectively.</p>
<pre v-code><code>
&lt;Knob v-model="value" :min="-50" :max="10" /&gt;
</code></pre>
<h5>Step</h5>
<p>Step factor is 1 by default and can be customized with <i>step</i> option.</p>
<h5>Step</h5>
<p>Step factor is 1 by default and can be customized with <i>step</i> option.</p>
<pre v-code><code>
&lt;Knob v-model="value" :step="10" /&gt;
</code></pre>
<h5>Styling</h5>
<p><i>valueColor</i> defines the value color, <i>rangeColor</i> defines the range background and similarly <i>textColor</i> configures the color of the value text.
In addition, <i>strokeWidth</i> is used to determine the width of the stroke of range and value sections.</p>
<h5>Styling</h5>
<p><i>valueColor</i> defines the value color, <i>rangeColor</i> defines the range background and similarly <i>textColor</i> configures the color of the value text.
In addition, <i>strokeWidth</i> is used to determine the width of the stroke of range and value sections.</p>
<pre v-code><code>
&lt;Knob v-model="value" valueColor="SlateGray" rangeColor="MediumTurquoise" /&gt;
</code></pre>
<h5>Size</h5>
<p>Default size of the Knob is 100 pixels for width and height, use the <i>size</i> property to customize it per your requirements.</p>
<h5>Size</h5>
<p>Default size of the Knob is 100 pixels for width and height, use the <i>size</i> property to customize it per your requirements.</p>
<pre v-code><code>
&lt;Knob v-model="value" :size="200" /&gt;
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>number</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>size</td>
<td>number</td>
<td>100</td>
<td>Size of the component in pixels.</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the component should be disabled.</td>
</tr>
<tr>
<td>readonly</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the component value cannot be edited.</td>
</tr>
<tr>
<td>step</td>
<td>number</td>
<td>null</td>
<td>Step factor to increment/decrement the value.</td>
</tr>
<tr>
<td>min</td>
<td>number</td>
<td>0</td>
<td>Mininum boundary value.</td>
</tr>
<tr>
<td>max</td>
<td>number</td>
<td>100</td>
<td>Maximum boundary value.</td>
</tr>
<tr>
<td>valueColor</td>
<td>string</td>
<td>null</td>
<td>Background of the value.</td>
</tr>
<tr>
<td>rangeColor</td>
<td>number</td>
<td>null</td>
<td>Background color of the range.</td>
</tr>
<tr>
<td>textColor</td>
<td>number</td>
<td>null</td>
<td>Color of the value text.</td>
</tr>
<tr>
<td>strokeWidth</td>
<td>number</td>
<td>14</td>
<td>Width of the knob stroke.</td>
</tr>
<tr>
<td>showValue</td>
<td>boolean</td>
<td>true</td>
<td>Whether the show the value inside the knob.</td>
</tr>
<tr>
<td>valueTemplate</td>
<td>string</td>
<td>{value}</td>
<td>Template string of the value.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>number</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>size</td>
<td>number</td>
<td>100</td>
<td>Size of the component in pixels.</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the component should be disabled.</td>
</tr>
<tr>
<td>readonly</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the component value cannot be edited.</td>
</tr>
<tr>
<td>step</td>
<td>number</td>
<td>null</td>
<td>Step factor to increment/decrement the value.</td>
</tr>
<tr>
<td>min</td>
<td>number</td>
<td>0</td>
<td>Mininum boundary value.</td>
</tr>
<tr>
<td>max</td>
<td>number</td>
<td>100</td>
<td>Maximum boundary value.</td>
</tr>
<tr>
<td>valueColor</td>
<td>string</td>
<td>null</td>
<td>Background of the value.</td>
</tr>
<tr>
<td>rangeColor</td>
<td>number</td>
<td>null</td>
<td>Background color of the range.</td>
</tr>
<tr>
<td>textColor</td>
<td>number</td>
<td>null</td>
<td>Color of the value text.</td>
</tr>
<tr>
<td>strokeWidth</td>
<td>number</td>
<td>14</td>
<td>Width of the knob stroke.</td>
</tr>
<tr>
<td>showValue</td>
<td>boolean</td>
<td>true</td>
<td>Whether the show the value inside the knob.</td>
</tr>
<tr>
<td>valueTemplate</td>
<td>string</td>
<td>{value}</td>
<td>Template string of the value.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>change</td>
<td>value: New value </td>
<td>Callback to invoke when the value changes.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>change</td>
<td>value: New value </td>
<td>Callback to invoke when the value changes.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-knob</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-knob-text</td>
<td>Text element.</td>
</tr>
<tr>
<td>p-knob-value</td>
<td>Value element.</td>
</tr>
<tr>
<td>p-knob-text</td>
<td>Text element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-knob</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-knob-text</td>
<td>Text element.</td>
</tr>
<tr>
<td>p-knob-value</td>
<td>Value element.</td>
</tr>
<tr>
<td>p-knob-text</td>
<td>Text element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/knob" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="KnobDemo" :sources="sources"/>
</div>
<pre v-code><code><template v-pre>
&lt;div class="p-grid p-formgrid p-text-center"&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;h5&gt;Basic&lt;/h5&gt;
&lt;Knob v-model="value1" /&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;h5&gt;Readonly&lt;/h5&gt;
&lt;Knob v-model="value2" readonly /&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;h5&gt;Disabled&lt;/h5&gt;
&lt;Knob v-model="value3" disabled /&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;h5 class="p-mt-3"&gt;Min/Max&lt;/h5&gt;
&lt;Knob v-model="value4" :min="-50" :max="50" /&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;h5 class="p-mt-3"&gt;Step&lt;/h5&gt;
&lt;Knob v-model="value5" :step="10" /&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;h5 class="p-mt-3"&gt;Template&lt;/h5&gt;
&lt;Knob v-model="value6" valueTemplate="{value}%" /&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;h5 class="p-mt-3"&gt;Stroke&lt;/h5&gt;
&lt;Knob v-model="value7" :strokeWidth="5" /&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;h5 class="p-mt-3"&gt;Size&lt;/h5&gt;
&lt;Knob v-model="value8" :size="200"/&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;h5 class="p-mt-3"&gt;Color&lt;/h5&gt;
&lt;Knob v-model="value9" valueColor="SlateGray" rangeColor="MediumTurquoise" /&gt;
&lt;/div&gt;
&lt;/div&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
value1: 0,
value2: 50,
value3: 75,
value4: 10,
value5: 40,
value6: 60,
value7: 40,
value8: 60,
value9: 50,
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<div class="p-grid p-formgrid p-text-center">
<div class="p-field p-col-12 p-md-4">
<h5>Basic</h5>
<Knob v-model="value1" />
</div>
<div class="p-field p-col-12 p-md-4">
<h5>Readonly</h5>
<Knob v-model="value2" readonly />
</div>
<div class="p-field p-col-12 p-md-4">
<h5>Disabled</h5>
<Knob v-model="value3" disabled />
</div>
<div class="p-field p-col-12 p-md-4">
<h5 class="p-mt-3">Min/Max</h5>
<Knob v-model="value4" :min="-50" :max="50" />
</div>
<div class="p-field p-col-12 p-md-4">
<h5 class="p-mt-3">Step</h5>
<Knob v-model="value5" :step="10" />
</div>
<div class="p-field p-col-12 p-md-4">
<h5 class="p-mt-3">Template</h5>
<Knob v-model="value6" valueTemplate="{value}%" />
</div>
<div class="p-field p-col-12 p-md-4">
<h5 class="p-mt-3">Stroke</h5>
<Knob v-model="value7" :strokeWidth="5" />
</div>
<div class="p-field p-col-12 p-md-4">
<h5 class="p-mt-3">Size</h5>
<Knob v-model="value8" :size="200"/>
</div>
<div class="p-field p-col-12 p-md-4">
<h5 class="p-mt-3">Color</h5>
<Knob v-model="value9" valueColor="SlateGray" rangeColor="MediumTurquoise" />
</div>
</div>
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<div class="p-grid p-formgrid p-text-center">
<div class="p-field p-col-12 p-md-4">
<h5>Basic</h5>
<Knob v-model="value1" />
</div>
<div class="p-field p-col-12 p-md-4">
<h5>Readonly</h5>
<Knob v-model="value2" readonly />
</div>
<div class="p-field p-col-12 p-md-4">
<h5>Disabled</h5>
<Knob v-model="value3" disabled />
</div>
<div class="p-field p-col-12 p-md-4">
<h5 class="p-mt-3">Min/Max</h5>
<Knob v-model="value4" :min="-50" :max="50" />
</div>
<div class="p-field p-col-12 p-md-4">
<h5 class="p-mt-3">Step</h5>
<Knob v-model="value5" :step="10" />
</div>
<div class="p-field p-col-12 p-md-4">
<h5 class="p-mt-3">Template</h5>
<Knob v-model="value6" valueTemplate="{value}%" />
</div>
<div class="p-field p-col-12 p-md-4">
<h5 class="p-mt-3">Stroke</h5>
<Knob v-model="value7" :strokeWidth="5" />
</div>
<div class="p-field p-col-12 p-md-4">
<h5 class="p-mt-3">Size</h5>
<Knob v-model="value8" :size="200"/>
</div>
<div class="p-field p-col-12 p-md-4">
<h5 class="p-mt-3">Color</h5>
<Knob v-model="value9" valueColor="SlateGray" rangeColor="MediumTurquoise" />
</div>
</div>
</div>
@ -343,13 +267,78 @@ export default {
value9: 50,
}
}
}`
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div class="p-grid p-formgrid p-text-center">
<div class="p-field p-col-12 p-md-4">
<h5>Basic</h5>
<Knob v-model="value1" />
</div>
<div class="p-field p-col-12 p-md-4">
<h5>Readonly</h5>
<Knob v-model="value2" readonly />
</div>
<div class="p-field p-col-12 p-md-4">
<h5>Disabled</h5>
<Knob v-model="value3" disabled />
</div>
<div class="p-field p-col-12 p-md-4">
<h5 class="p-mt-3">Min/Max</h5>
<Knob v-model="value4" :min="-50" :max="50" />
</div>
<div class="p-field p-col-12 p-md-4">
<h5 class="p-mt-3">Step</h5>
<Knob v-model="value5" :step="10" />
</div>
<div class="p-field p-col-12 p-md-4">
<h5 class="p-mt-3">Template</h5>
<Knob v-model="value6" valueTemplate="{value}%" />
</div>
<div class="p-field p-col-12 p-md-4">
<h5 class="p-mt-3">Stroke</h5>
<Knob v-model="value7" :strokeWidth="5" />
</div>
<div class="p-field p-col-12 p-md-4">
<h5 class="p-mt-3">Size</h5>
<Knob v-model="value8" :size="200"/>
</div>
<div class="p-field p-col-12 p-md-4">
<h5 class="p-mt-3">Color</h5>
<Knob v-model="value9" valueColor="SlateGray" rangeColor="MediumTurquoise" />
</div>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const value1 = ref(0);
const value2 = ref(50);
const value3 = ref(75);
const value4 = ref(10);
const value5 = ref(40);
const value6 = ref(60);
const value7 = ref(40);
const value8 = ref(60);
const value9 = ref(50);
return { value1, value2, value3, value4, value5, value6, value7, value8, value9 }
}
}
<\\/script>
`
}
}
}
},
components: {
LiveEditor
}
}
</script>

754
src/views/listbox/ListboxDoc.vue
View File

@ -1,15 +1,13 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="ListboxDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import Listbox from 'primevue/listbox';
</code></pre>
<h5>Getting Started</h5>
<p>Listbox requires a value to bind and a collection of arbitrary objects along with the <i>optionLabel</i> property to specify the label property of the option.</p>
<h5>Getting Started</h5>
<p>Listbox requires a value to bind and a collection of arbitrary objects along with the <i>optionLabel</i> property to specify the label property of the option.</p>
<pre v-code><code>
&lt;Listbox v-model="selectedCity" :options="cities" optionLabel="name" /&gt;
@ -31,17 +29,17 @@ data() {
</code></pre>
<h5>Selection</h5>
<p>Listbox allows selection of either single or multiple items. In single case, model should be a single object reference whereas in multiple case should be an array. Multiple items can either be selected
using metaKey or toggled individually depending on the value of <i>metaKeySelection</i> property value which is true by default. On touch enabled
devices metaKeySelection is turned off automatically.</p>
<h5>Selection</h5>
<p>Listbox allows selection of either single or multiple items. In single case, model should be a single object reference whereas in multiple case should be an array. Multiple items can either be selected
using metaKey or toggled individually depending on the value of <i>metaKeySelection</i> property value which is true by default. On touch enabled
devices metaKeySelection is turned off automatically.</p>
<pre v-code><code>
&lt;Listbox v-model="selectedCity" :options="cities" optionLabel="name" :multiple="true"/&gt;
</code></pre>
<h5>Grouping</h5>
<p>Options groups are specified with the <i>optionGroupLabel</i> and <i>optionGroupChildren</i> properties.</p>
<h5>Grouping</h5>
<p>Options groups are specified with the <i>optionGroupLabel</i> and <i>optionGroupChildren</i> properties.</p>
<pre v-code.script><code>
export default {
data() {
@ -86,18 +84,18 @@ export default {
</template>
</code></pre>
<h5>Filter</h5>
<p>Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable <i>filter</i> property. By default,
optionLabel is used when searching and <i>filterFields</i> can be used to customize the fields being utilized. Furthermore, <i>filterMatchMode</i> is available
to define the search algorithm. Valid values are "contains" (default), "startsWith" and "endsWith".</p>
<h5>Filter</h5>
<p>Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable <i>filter</i> property. By default,
optionLabel is used when searching and <i>filterFields</i> can be used to customize the fields being utilized. Furthermore, <i>filterMatchMode</i> is available
to define the search algorithm. Valid values are "contains" (default), "startsWith" and "endsWith".</p>
<pre v-code><code>
&lt;Listbox v-model="selectedCity" :options="cities" optionLabel="name" :filter="true"/&gt;
</code></pre>
<h5>Templating</h5>
<p>Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter.
In addition <i>optiongroup</i>, <i>header</i>, <i>footer</i>, <i>emptyfilter</i> and <i>empty</i> slots are provided for further customization.</p>
<h5>Templating</h5>
<p>Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter.
In addition <i>optiongroup</i>, <i>header</i>, <i>footer</i>, <i>emptyfilter</i> and <i>empty</i> slots are provided for further customization.</p>
<pre v-code><code><template v-pre>
&lt;Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em"&gt;
&lt;template #option="slotProps"&gt;
@ -110,377 +108,279 @@ export default {
</template>
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>options</td>
<td>array</td>
<td>null</td>
<td>An array of selectitems to display as the available options.</td>
</tr>
<tr>
<td>optionLabel</td>
<td>string</td>
<td>null</td>
<td>Property name or getter function to use as the label of an option.</td>
</tr>
<tr>
<td>optionValue</td>
<td>string</td>
<td>null</td>
<td>Property name or getter function to use as the value of an option, defaults to the option itself when not defined.</td>
</tr>
<tr>
<td>optionDisabled</td>
<td>boolean</td>
<td>null</td>
<td>Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.</td>
</tr>
<tr>
<td>optionGroupLabel</td>
<td>string</td>
<td>null</td>
<td>Property name or getter function to use as the label of an option group.</td>
</tr>
<tr>
<td>optionGroupChildren</td>
<td>string</td>
<td>null</td>
<td>Property name or getter function that refers to the children options of option group.</td>
</tr>
<tr>
<td>listStyle</td>
<td>string</td>
<td>null</td>
<td>Inline style of inner list element.</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>When specified, disables the component.</td>
</tr>
<tr>
<td>dataKey</td>
<td>string</td>
<td>false</td>
<td>A property to uniquely identify an option.</td>
</tr>
<tr>
<td>multiple</td>
<td>boolean</td>
<td>false</td>
<td>When specified, allows selecting multiple values.</td>
</tr>
<tr>
<td>metaKeySelection</td>
<td>boolean</td>
<td>true</td>
<td>Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item
can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.</td>
</tr>
<tr>
<td>filter</td>
<td>boolean</td>
<td>false</td>
<td>When specified, displays a filter input at header.</td>
</tr>
<tr>
<td>filterPlaceholder</td>
<td>string</td>
<td>null</td>
<td>Placeholder text to show when filter input is empty.</td>
</tr>
<tr>
<td>filterLocale</td>
<td>string</td>
<td>undefined</td>
<td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
</tr>
<tr>
<td>filterMatchMode</td>
<td>string</td>
<td>contains</td>
<td>Defines the filtering algorithm to use when searching the options. Valid values are "contains" (default), "startsWith" and "endsWith"</td>
</tr>
<tr>
<td>filterFields</td>
<td>array</td>
<td>null</td>
<td>Fields used when filtering the options, defaults to optionLabel.</td>
</tr>
<tr>
<td>emptyFilterMessage</td>
<td>string</td>
<td>No results found</td>
<td>Text to display when filtering does not return any results. Defaults to value from PrimeVue locale configuration.</td>
</tr>
<tr>
<td>emptyMessage</td>
<td>string</td>
<td>No results found</td>
<td>Text to display when there are no options available. Defaults to value from PrimeVue locale configuration.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>options</td>
<td>array</td>
<td>null</td>
<td>An array of selectitems to display as the available options.</td>
</tr>
<tr>
<td>optionLabel</td>
<td>string</td>
<td>null</td>
<td>Property name or getter function to use as the label of an option.</td>
</tr>
<tr>
<td>optionValue</td>
<td>string</td>
<td>null</td>
<td>Property name or getter function to use as the value of an option, defaults to the option itself when not defined.</td>
</tr>
<tr>
<td>optionDisabled</td>
<td>boolean</td>
<td>null</td>
<td>Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.</td>
</tr>
<tr>
<td>optionGroupLabel</td>
<td>string</td>
<td>null</td>
<td>Property name or getter function to use as the label of an option group.</td>
</tr>
<tr>
<td>optionGroupChildren</td>
<td>string</td>
<td>null</td>
<td>Property name or getter function that refers to the children options of option group.</td>
</tr>
<tr>
<td>listStyle</td>
<td>string</td>
<td>null</td>
<td>Inline style of inner list element.</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>When specified, disables the component.</td>
</tr>
<tr>
<td>dataKey</td>
<td>string</td>
<td>false</td>
<td>A property to uniquely identify an option.</td>
</tr>
<tr>
<td>multiple</td>
<td>boolean</td>
<td>false</td>
<td>When specified, allows selecting multiple values.</td>
</tr>
<tr>
<td>metaKeySelection</td>
<td>boolean</td>
<td>true</td>
<td>Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item
can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.</td>
</tr>
<tr>
<td>filter</td>
<td>boolean</td>
<td>false</td>
<td>When specified, displays a filter input at header.</td>
</tr>
<tr>
<td>filterPlaceholder</td>
<td>string</td>
<td>null</td>
<td>Placeholder text to show when filter input is empty.</td>
</tr>
<tr>
<td>filterLocale</td>
<td>string</td>
<td>undefined</td>
<td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
</tr>
<tr>
<td>filterMatchMode</td>
<td>string</td>
<td>contains</td>
<td>Defines the filtering algorithm to use when searching the options. Valid values are "contains" (default), "startsWith" and "endsWith"</td>
</tr>
<tr>
<td>filterFields</td>
<td>array</td>
<td>null</td>
<td>Fields used when filtering the options, defaults to optionLabel.</td>
</tr>
<tr>
<td>emptyFilterMessage</td>
<td>string</td>
<td>No results found</td>
<td>Text to display when filtering does not return any results. Defaults to value from PrimeVue locale configuration.</td>
</tr>
<tr>
<td>emptyMessage</td>
<td>string</td>
<td>No results found</td>
<td>Text to display when there are no options available. Defaults to value from PrimeVue locale configuration.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>change</td>
<td>event.originalEvent: Original event <br />
event.value: Selected option value </td>
<td>Callback to invoke on value change.</td>
</tr>
<tr>
<td>filter</td>
<td>event.originalEvent: Original event <br />
event.value: Filter value </td>
<td>Callback to invoke on filter input.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>change</td>
<td>event.originalEvent: Original event <br />
event.value: Selected option value </td>
<td>Callback to invoke on value change.</td>
</tr>
<tr>
<td>filter</td>
<td>event.originalEvent: Original event <br />
event.value: Filter value </td>
<td>Callback to invoke on filter input.</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>option</td>
<td>option: Option instance <br />
index: Index of the option</td>
</tr>
<tr>
<td>optiongroup</td>
<td>option: OptionGroup instance <br />
index: Index of the option group</td>
</tr>
<tr>
<td>header</td>
<td>value: Value of the component <br />
options: Displayed options</td>
</tr>
<tr>
<td>footer</td>
<td>value: Value of the component <br />
options: Displayed options</td>
</tr>
<tr>
<td>emptyfilter</td>
<td>-</td>
</tr>
<tr>
<td>empty</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>option</td>
<td>option: Option instance <br />
index: Index of the option</td>
</tr>
<tr>
<td>optiongroup</td>
<td>option: OptionGroup instance <br />
index: Index of the option group</td>
</tr>
<tr>
<td>header</td>
<td>value: Value of the component <br />
options: Displayed options</td>
</tr>
<tr>
<td>footer</td>
<td>value: Value of the component <br />
options: Displayed options</td>
</tr>
<tr>
<td>emptyfilter</td>
<td>-</td>
</tr>
<tr>
<td>empty</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-listbox</td>
<td>Main container element.</td>
</tr>
<tr>
<td>p-listbox-header</td>
<td>Header element.</td>
</tr>
<tr>
<td>p-listbox-list-wrapper</td>
<td>Container of list element.</td>
</tr>
<tr>
<td>p-listbox-list</td>
<td>List element.</td>
</tr>
<tr>
<td>p-listbox-item</td>
<td>An item in the list element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-listbox</td>
<td>Main container element.</td>
</tr>
<tr>
<td>p-listbox-header</td>
<td>Header element.</td>
</tr>
<tr>
<td>p-listbox-list-wrapper</td>
<td>Container of list element.</td>
</tr>
<tr>
<td>p-listbox-list</td>
<td>List element.</td>
</tr>
<tr>
<td>p-listbox-item</td>
<td>An item in the list element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/listbox" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="ListboxDemo" :sources="sources"/>
</div>
<pre v-code><code><template v-pre>
&lt;h5&gt;Single&lt;/h5&gt;
&lt;Listbox v-model="selectedCity" :options="cities" optionLabel="name" style="width:15rem" /&gt;
&lt;h5&gt;Grouped&lt;/h5&gt;
&lt;Listbox v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" style="width:15rem" optionGroupLabel="label" optionGroupChildren="items" listStyle="max-height:250px"&gt;
&lt;template #optiongroup="slotProps"&gt;
&lt;div class="p-d-flex p-ai-center country-item"&gt;
&lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" /&gt;
&lt;div&gt;{{slotProps.option.label}}&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/Listbox&gt;
&lt;h5&gt;Advanced with Templating, Filtering and Multiple Selection&lt;/h5&gt;
&lt;Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width:15rem" filterPlaceholder="Search"&gt;
&lt;template #option="slotProps"&gt;
&lt;div class="country-item"&gt;
&lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" /&gt;
&lt;div&gt;{{slotProps.option.name}}&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/Listbox&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
selectedCity: null,
selectedCountries: null,
selectedGroupedCity: null,
cities: [
{name: 'New York', code: 'NY'},
{name: 'Rome', code: 'RM'},
{name: 'London', code: 'LDN'},
{name: 'Istanbul', code: 'IST'},
{name: 'Paris', code: 'PRS'}
],
countries: [
{name: 'Australia', code: 'AU'},
{name: 'Brazil', code: 'BR'},
{name: 'China', code: 'CN'},
{name: 'Egypt', code: 'EG'},
{name: 'France', code: 'FR'},
{name: 'Germany', code: 'DE'},
{name: 'India', code: 'IN'},
{name: 'Japan', code: 'JP'},
{name: 'Spain', code: 'ES'},
{name: 'United States', code: 'US'}
],
groupedCities: [{
label: 'Germany', code: 'DE',
items: [
{label: 'Berlin', value: 'Berlin'},
{label: 'Frankfurt', value: 'Frankfurt'},
{label: 'Hamburg', value: 'Hamburg'},
{label: 'Munich', value: 'Munich'}
]
},
{
label: 'USA', code: 'US',
items: [
{label: 'Chicago', value: 'Chicago'},
{label: 'Los Angeles', value: 'Los Angeles'},
{label: 'New York', value: 'New York'},
{label: 'San Francisco', value: 'San Francisco'}
]
},
{
label: 'Japan', code: 'JP',
items: [
{label: 'Kyoto', value: 'Kyoto'},
{label: 'Osaka', value: 'Osaka'},
{label: 'Tokyo', value: 'Tokyo'},
{label: 'Yokohama', value: 'Yokohama'}
]
}]
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Single</h5>
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" style="width:15rem" />
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<h5>Single</h5>
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" style="width:15rem" />
<h5>Grouped</h5>
<Listbox v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" style="width:15rem" optionGroupLabel="label" optionGroupChildren="items" listStyle="max-height:250px">
<template #optiongroup="slotProps">
<div class="p-d-flex p-ai-center country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
<div>{{slotProps.option.label}}</div>
</div>
</template>
</Listbox>
<h5>Grouped</h5>
<Listbox v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" style="width:15rem" optionGroupLabel="label" optionGroupChildren="items" listStyle="max-height:250px">
<template #optiongroup="slotProps">
<div class="p-d-flex p-ai-center country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="p-mr-2" />
<div>{{slotProps.option.label}}</div>
</div>
</template>
</Listbox>
<h5>Advanced with Templating, Filtering and Multiple Selection</h5>
<Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width:15rem" filterPlaceholder="Search">
<template #option="slotProps">
<div class="country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
<div>{{slotProps.option.name}}</div>
</div>
</template>
</Listbox>
</div>
</div>
<h5>Advanced with Templating, Filtering and Multiple Selection</h5>
<Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width:15rem" filterPlaceholder="Search">
<template #option="slotProps">
<div class="country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="p-mr-2" />
<div>{{slotProps.option.name}}</div>
</div>
</template>
</Listbox>
</div>
</template>
@ -539,13 +439,105 @@ export default {
}]
}
}
}`
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<h5>Single</h5>
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" style="width:15rem" />
<h5>Grouped</h5>
<Listbox v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" style="width:15rem" optionGroupLabel="label" optionGroupChildren="items" listStyle="max-height:250px">
<template #optiongroup="slotProps">
<div class="p-d-flex p-ai-center country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="p-mr-2" />
<div>{{slotProps.option.label}}</div>
</div>
</template>
</Listbox>
<h5>Advanced with Templating, Filtering and Multiple Selection</h5>
<Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width:15rem" filterPlaceholder="Search">
<template #option="slotProps">
<div class="country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="p-mr-2" />
<div>{{slotProps.option.name}}</div>
</div>
</template>
</Listbox>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const selectedCity = ref();
const selectedCountries = ref();
const selectedGroupedCity = ref();
const cities = ref([
{name: 'New York', code: 'NY'},
{name: 'Rome', code: 'RM'},
{name: 'London', code: 'LDN'},
{name: 'Istanbul', code: 'IST'},
{name: 'Paris', code: 'PRS'}
]);
const countries = ref([
{name: 'Australia', code: 'AU'},
{name: 'Brazil', code: 'BR'},
{name: 'China', code: 'CN'},
{name: 'Egypt', code: 'EG'},
{name: 'France', code: 'FR'},
{name: 'Germany', code: 'DE'},
{name: 'India', code: 'IN'},
{name: 'Japan', code: 'JP'},
{name: 'Spain', code: 'ES'},
{name: 'United States', code: 'US'}
]);
const groupedCities = ref([
{
label: 'Germany', code: 'DE',
items: [
{label: 'Berlin', value: 'Berlin'},
{label: 'Frankfurt', value: 'Frankfurt'},
{label: 'Hamburg', value: 'Hamburg'},
{label: 'Munich', value: 'Munich'}
]
},
{
label: 'USA', code: 'US',
items: [
{label: 'Chicago', value: 'Chicago'},
{label: 'Los Angeles', value: 'Los Angeles'},
{label: 'New York', value: 'New York'},
{label: 'San Francisco', value: 'San Francisco'}
]
},
{
label: 'Japan', code: 'JP',
items: [
{label: 'Kyoto', value: 'Kyoto'},
{label: 'Osaka', value: 'Osaka'},
{label: 'Tokyo', value: 'Tokyo'},
{label: 'Yokohama', value: 'Yokohama'}
]
}
]);
return { selectedCity, selectedCountries, selectedGroupedCity, cities, countries, groupedCities }
}
}
<\\/script>
`
}
}
}
},
components: {
LiveEditor
}
}
</script>

1027
src/views/multiselect/MultiSelectDoc.vue
View File

File diff suppressed because it is too large Load Diff

579
src/views/password/PasswordDoc.vue
View File

@ -1,305 +1,247 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="PasswordDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import Password from 'primevue/password';
</code></pre>
<h5>Getting Started</h5>
<p>A model can be bound using the standard v-model directive.</p>
<h5>Getting Started</h5>
<p>A model can be bound using the standard v-model directive.</p>
<pre v-code><code>
&lt;Password v-model="value" /&gt;
</code></pre>
<h5>Customization</h5>
<p>Password component uses regular expressions for middle and strong passwords with the following defaults.</p>
<h5>Customization</h5>
<p>Password component uses regular expressions for middle and strong passwords with the following defaults.</p>
<h6>Medium</h6>
<p><i>^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,}).</i></p>
<ul>
<li>At least one lowercase</li>
<li>At least one uppercase or one number</li>
<li>Minimum 6 characters</li>
</ul>
<h6>Medium</h6>
<p><i>^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,}).</i></p>
<ul>
<li>At least one lowercase</li>
<li>At least one uppercase or one number</li>
<li>Minimum 6 characters</li>
</ul>
<h6>Strong</h6>
<p><i>^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})</i></p>
<ul>
<h6>Strong</h6>
<p><i>^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})</i></p>
<ul>
<li>At least one lowercase</li>
<li>At least one uppercase</li>
<li>At least one numeric</li>
<li>Minimum 8 characters</li>
</ul>
<p>It is possible to define your own checks with the <i>mediumRegex</i> and <i>strongRegex</i> properties.</p>
<h5>Templating</h5>
<p>3 slots are included to customize the overlay. These are <i>header</i>, <i>content</i> and <i>footer</i>. Note that content overrides the default meter.</p>
<pre v-code><code>
&lt;Password v-model="value4"&gt;
&lt;template #header&gt;
&lt;h6&gt;Pick a password&lt;/h6&gt;
&lt;/template&gt;
&lt;template #footer&gt;
&lt;Divider /&gt;
&lt;p class="p-mt-2"&gt;Suggestions&lt;/p&gt;
&lt;ul class="p-pl-2 p-ml-2 p-mt-0" style="line-height: 1.5"&gt;
&lt;li&gt;At least one lowercase&lt;/li&gt;
&lt;li&gt;At least one uppercase&lt;/li&gt;
&lt;li&gt;At least one numeric&lt;/li&gt;
&lt;li&gt;Minimum 8 characters&lt;/li&gt;
&lt;/ul&gt;
&lt;/template&gt;
&lt;/Password&gt;
</code></pre>
<h5>Properties</h5>
<p>Any property such as name and placeholder are passed to the underlying input element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>promptLabel</td>
<td>string</td>
<td>null</td>
<td>Text to prompt password entry. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr>
<tr>
<td>mediumRegex</td>
<td>string</td>
<td>Regex for a medium level password.</td>
<td>^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,}).</td>
</tr>
<tr>
<td>strongRegex</td>
<td>string</td>
<td>Regex for a strong level password.</td>
<td>^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})</td>
</tr>
<tr>
<td>weakLabel</td>
<td>string</td>
<td>null</td>
<td>Text for a weak password. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr>
<tr>
<td>mediumLabel</td>
<td>string</td>
<td>null</td>
<td>Text for a medium password. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr>
<tr>
<td>strongLabel</td>
<td>string</td>
<td>null</td>
<td>Text for a strong password. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr>
<tr>
<td>feedback</td>
<td>boolean</td>
<td>true</td>
<td>Whether to show the strength indicator or not.</td>
</tr>
<tr>
<td>toggleMask</td>
<td>boolean</td>
<td>false</td>
<td>Whether to show an icon to display the password as plain text.</td>
</tr>
<tr>
<td>appendTo</td>
<td>string</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
</tr>
<tr>
<td>inputStyle</td>
<td>any</td>
<td>null</td>
<td>Inline style of the input field.</td>
</tr>
<tr>
<td>inputClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the input field.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>header</td>
<td>-</td>
</tr>
<tr>
<td>content</td>
<td>-</td>
</tr>
<tr>
<td>footer</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-password-panel</td>
<td>Container of password panel</td>
</tr>
<tr>
<td>p-password-meter</td>
<td>Meter element of password strength</td>
</tr>
<tr>
<td>p-password-info</td>
<td>Text to display strength</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
export default {
data() {
return {
sources: {
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<h5>Basic</h5>
<Password v-model="value1" :feedback="false" />
<h5>Password Meter</h5>
<Password v-model="value2" />
<h5>Show Password</h5>
<Password v-model="value3" toggleMask></Password>
<h5>Templating</h5>
<Password v-model="value4">
<template #header>
<h6>Pick a password</h6>
</template>
<template #footer="sp">
{{sp.level}}
<Divider />
<p class="p-mt-2">Suggestions</p>
<ul class="p-pl-2 p-ml-2 p-mt-0" style="line-height: 1.5">
<li>At least one lowercase</li>
<li>At least one uppercase</li>
<li>At least one numeric</li>
<li>Minimum 8 characters</li>
</ul>
<p>It is possible to define your own checks with the <i>mediumRegex</i> and <i>strongRegex</i> properties.</p>
<h5>Templating</h5>
<p>3 slots are included to customize the overlay. These are <i>header</i>, <i>content</i> and <i>footer</i>. Note that content overrides the default meter.</p>
<pre v-code><code>
&lt;Password v-model="value4"&gt;
&lt;template #header&gt;
&lt;h6&gt;Pick a password&lt;/h6&gt;
&lt;/template&gt;
&lt;template #footer&gt;
&lt;Divider /&gt;
&lt;p class="p-mt-2"&gt;Suggestions&lt;/p&gt;
&lt;ul class="p-pl-2 p-ml-2 p-mt-0" style="line-height: 1.5"&gt;
&lt;li&gt;At least one lowercase&lt;/li&gt;
&lt;li&gt;At least one uppercase&lt;/li&gt;
&lt;li&gt;At least one numeric&lt;/li&gt;
&lt;li&gt;Minimum 8 characters&lt;/li&gt;
&lt;/ul&gt;
&lt;/template&gt;
&lt;/Password&gt;
</code></pre>
<h5>Properties</h5>
<p>Any property such as name and placeholder are passed to the underlying input element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>promptLabel</td>
<td>string</td>
<td>null</td>
<td>Text to prompt password entry. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr>
<tr>
<td>mediumRegex</td>
<td>string</td>
<td>Regex for a medium level password.</td>
<td>^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,}).</td>
</tr>
<tr>
<td>strongRegex</td>
<td>string</td>
<td>Regex for a strong level password.</td>
<td>^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})</td>
</tr>
<tr>
<td>weakLabel</td>
<td>string</td>
<td>null</td>
<td>Text for a weak password. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr>
<tr>
<td>mediumLabel</td>
<td>string</td>
<td>null</td>
<td>Text for a medium password. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr>
<tr>
<td>strongLabel</td>
<td>string</td>
<td>null</td>
<td>Text for a strong password. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr>
<tr>
<td>feedback</td>
<td>boolean</td>
<td>true</td>
<td>Whether to show the strength indicator or not.</td>
</tr>
<tr>
<td>toggleMask</td>
<td>boolean</td>
<td>false</td>
<td>Whether to show an icon to display the password as plain text.</td>
</tr>
<tr>
<td>appendTo</td>
<td>string</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
</tr>
<tr>
<td>inputStyle</td>
<td>any</td>
<td>null</td>
<td>Inline style of the input field.</td>
</tr>
<tr>
<td>inputClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the input field.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>header</td>
<td>-</td>
</tr>
<tr>
<td>content</td>
<td>-</td>
</tr>
<tr>
<td>footer</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-password-panel</td>
<td>Container of password panel</td>
</tr>
<tr>
<td>p-password-meter</td>
<td>Meter element of password strength</td>
</tr>
<tr>
<td>p-password-info</td>
<td>Text to display strength</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/password" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="PasswordDemo" :sources="sources" :components="['Divider']"/>
</div>
<pre v-code><code>
<h5>Basic</h5>
&lt;Password v-model="value1" :feedback="false" /&gt;
&lt;h5&gt;Password Meter&lt;/h5&gt;
&lt;Password v-model="value2" /&gt;
&lt;h5&gt;Show Password&lt;/h5&gt;
&lt;Password v-model="value3" toggleMask&gt;&lt;/Password&gt;
&lt;h5&gt;Templating&lt;/h5&gt;
&lt;Password v-model="value4"&gt;
&lt;template #header&gt;
&lt;h6&gt;Pick a password&lt;/h6&gt;
&lt;/template&gt;
&lt;template #footer&gt;
&lt;Divider /&gt;
&lt;p class="p-mt-2"&gt;Suggestions&lt;/p&gt;
&lt;ul class="p-pl-2 p-ml-2 p-mt-0" style="line-height: 1.5"&gt;
&lt;li&gt;At least one lowercase&lt;/li&gt;
&lt;li&gt;At least one uppercase&lt;/li&gt;
&lt;li&gt;At least one numeric&lt;/li&gt;
&lt;li&gt;Minimum 8 characters&lt;/li&gt;
&lt;/ul&gt;
&lt;/template&gt;
&lt;/Password&gt;
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
value1: null,
value2: null,
value3: null,
value4: null
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Basic</h5>
<Password v-model="value1" :feedback="false" />
<h5>Password Meter</h5>
<Password v-model="value2" />
<h5>Show Password</h5>
<Password v-model="value3" toggleMask></Password>
<h5>Templating</h5>
<Password v-model="value4">
<template #header>
<h6>Pick a password</h6>
</template>
<template #footer="sp">
{{sp.level}}
<Divider />
<p class="p-mt-2">Suggestions</p>
<ul class="p-pl-2 p-ml-2 p-mt-0" style="line-height: 1.5">
<li>At least one lowercase</li>
<li>At least one uppercase</li>
<li>At least one numeric</li>
<li>Minimum 8 characters</li>
</ul>
</template>
</Password>
</div>
</div>
</template>
</Password>
</div>
</template>
@ -313,13 +255,74 @@ export default {
value4: null
}
}
}`
}
<\\/script>
<style lang="scss" scoped>
::v-deep(.p-password input) {
width: 15rem
}
</style>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<h5>Basic</h5>
<Password v-model="value1" :feedback="false" />
<h5>Password Meter</h5>
<Password v-model="value2" />
<h5>Show Password</h5>
<Password v-model="value3" toggleMask></Password>
<h5>Templating</h5>
<Password v-model="value4">
<template #header>
<h6>Pick a password</h6>
</template>
<template #footer="sp">
{{sp.level}}
<Divider />
<p class="p-mt-2">Suggestions</p>
<ul class="p-pl-2 p-ml-2 p-mt-0" style="line-height: 1.5">
<li>At least one lowercase</li>
<li>At least one uppercase</li>
<li>At least one numeric</li>
<li>Minimum 8 characters</li>
</ul>
</template>
</Password>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const value1 = ref();
const value2 = ref();
const value3 = ref();
const value4 = ref();
return { value1, value2, value3, value4 }
}
}
<\\/script>
<style lang="scss" scoped>
::v-deep(.p-password input) {
width: 15rem
}
</style>
`
}
}
}
},
components: {
LiveEditor
}
}
</script>

309
src/views/radiobutton/RadioButtonDoc.vue
View File

@ -1,15 +1,13 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="RadioButtonDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import RadioButton from 'primevue/radiobutton';
</code></pre>
<h5>Getting Started</h5>
<p>Two-way value binding is defined using the standard v-model directive.</p>
<h5>Getting Started</h5>
<p>Two-way value binding is defined using the standard v-model directive.</p>
<pre v-code><code>
&lt;RadioButton name="city" value="Chicago" v-model="city" /&gt;
&lt;RadioButton name="city" value="Los Angeles" v-model="city" /&gt;
@ -37,162 +35,106 @@ export default {
</code></pre>
<h5>Properties</h5>
<p>Any property such as name and autofocus are passed to the underlying input element. Following is the additional property to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>any</td>
<td>null</td>
<td>Value of the checkbox.</td>
</tr>
<tr>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value binding of the checkbox.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property such as name and autofocus are passed to the underlying input element. Following is the additional property to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>any</td>
<td>null</td>
<td>Value of the checkbox.</td>
</tr>
<tr>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value binding of the checkbox.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<p>Any valid event such as focus and blur.</p>
<h5>Events</h5>
<p>Any valid event such as focus and blur.</p>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-radiobutton</td>
<td>Container element</td>
</tr>
<tr>
<td>p-radiobutton-box</td>
<td>Container of icon.</td>
</tr>
<tr>
<td>p-radiobutton-icon</td>
<td>Icon element.</td>
</tr>
<tr>
<td>p-radiobutton-label</td>
<td>Label element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-radiobutton</td>
<td>Container element</td>
</tr>
<tr>
<td>p-radiobutton-box</td>
<td>Container of icon.</td>
</tr>
<tr>
<td>p-radiobutton-icon</td>
<td>Icon element.</td>
</tr>
<tr>
<td>p-radiobutton-label</td>
<td>Label element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/radiobutton" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="RadioButtonDemo" :sources="sources"/>
</div>
<pre v-code><code><template v-pre>
&lt;h3&gt;Basic&lt;/h3&gt;
&lt;div class="p-field-radiobutton"&gt;
&lt;RadioButton id="city1" name="city" value="Chicago" v-model="city" /&gt;
&lt;label for="city1"&gt;Chicago&lt;/label&gt;
&lt;/div&gt;
&lt;div class="p-field-radiobutton"&gt;
&lt;RadioButton id="city2" name="city" value="Los Angeles" v-model="city" /&gt;
&lt;label for="city2"&gt;Los Angeles&lt;/label&gt;
&lt;/div&gt;
&lt;div class="p-field-radiobutton"&gt;
&lt;RadioButton id="city3" name="city" value="New York" v-model="city" /&gt;
&lt;label for="city3"&gt;New York&lt;/label&gt;
&lt;/div&gt;
&lt;div class="p-field-radiobutton"&gt;
&lt;RadioButton id="city4" name="city" value="San Francisco" v-model="city" /&gt;
&lt;label for="city4"&gt;San Francisco&lt;/label&gt;
&lt;/div&gt;
&lt;h5&gt;Dynamic Values, Preselection, Value Binding and Disabled Option&lt;/h5&gt;
&lt;div v-for="category of categories" :key="category.key" class="p-field-radiobutton"&gt;
&lt;RadioButton :id="category.key" name="category" :value="category" v-model="selectedCategory" :disabled="category.key === 'R'" /&gt;
&lt;label :for="category.key"&gt;{{category.name}}&lt;/label&gt;
&lt;/div&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
city: null,
categories: [{name: 'Accounting', key: 'A'}, {name: 'Marketing', key: 'M'}, {name: 'Production', key: 'P'}, {name: 'Research', key: 'R'}],
selectedCategory: null
}
},
created() {
this.selectedCategory = this.categories[1];
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Basic</h5>
<div class="p-field-radiobutton">
<RadioButton id="city1" name="city" value="Chicago" v-model="city" />
<label for="city1">Chicago</label>
</div>
<div class="p-field-radiobutton">
<RadioButton id="city2" name="city" value="Los Angeles" v-model="city" />
<label for="city2">Los Angeles</label>
</div>
<div class="p-field-radiobutton">
<RadioButton id="city3" name="city" value="New York" v-model="city" />
<label for="city3">New York</label>
</div>
<div class="p-field-radiobutton">
<RadioButton id="city4" name="city" value="San Francisco" v-model="city" />
<label for="city4">San Francisco</label>
</div>
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<h5>Basic</h5>
<div class="p-field-radiobutton">
<RadioButton id="city1" name="city" value="Chicago" v-model="city" />
<label for="city1">Chicago</label>
</div>
<div class="p-field-radiobutton">
<RadioButton id="city2" name="city" value="Los Angeles" v-model="city" />
<label for="city2">Los Angeles</label>
</div>
<div class="p-field-radiobutton">
<RadioButton id="city3" name="city" value="New York" v-model="city" />
<label for="city3">New York</label>
</div>
<div class="p-field-radiobutton">
<RadioButton id="city4" name="city" value="San Francisco" v-model="city" />
<label for="city4">San Francisco</label>
</div>
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
<div v-for="category of categories" :key="category.key" class="p-field-radiobutton">
<RadioButton :id="category.key" name="category" :value="category" v-model="selectedCategory" :disabled="category.key === 'R'" />
<label :for="category.key">{{category.name}}</label>
</div>
</div>
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
<div v-for="category of categories" :key="category.key" class="p-field-radiobutton">
<RadioButton :id="category.key" name="category" :value="category" v-model="selectedCategory" :disabled="category.key === 'R'" />
<label :for="category.key">{{category.name}}</label>
</div>
</div>
</template>
@ -202,20 +144,75 @@ export default {
data() {
return {
city: null,
categories: [{name: 'Accounting', key: 'A'}, {name: 'Marketing', key: 'M'}, {name: 'Production', key: 'P'}, {name: 'Research', key: 'R'}],
categories: [
{name: 'Accounting', key: 'A'},
{name: 'Marketing', key: 'M'},
{name: 'Production', key: 'P'},
{name: 'Research', key: 'R'}
],
selectedCategory: null
}
},
created() {
this.selectedCategory = this.categories[1];
}
}`
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<h5>Basic</h5>
<div class="p-field-radiobutton">
<RadioButton id="city1" name="city" value="Chicago" v-model="city" />
<label for="city1">Chicago</label>
</div>
<div class="p-field-radiobutton">
<RadioButton id="city2" name="city" value="Los Angeles" v-model="city" />
<label for="city2">Los Angeles</label>
</div>
<div class="p-field-radiobutton">
<RadioButton id="city3" name="city" value="New York" v-model="city" />
<label for="city3">New York</label>
</div>
<div class="p-field-radiobutton">
<RadioButton id="city4" name="city" value="San Francisco" v-model="city" />
<label for="city4">San Francisco</label>
</div>
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
<div v-for="category of categories" :key="category.key" class="p-field-radiobutton">
<RadioButton :id="category.key" name="category" :value="category" v-model="selectedCategory" :disabled="category.key === 'R'" />
<label :for="category.key">{{category.name}}</label>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const city = ref();
const categories = ref([
{name: 'Accounting', key: 'A'},
{name: 'Marketing', key: 'M'},
{name: 'Production', key: 'P'},
{name: 'Research', key: 'R'}
]);
const selectedCategory = ref(categories.value[1]);
return { city, categories, selectedCategory }
}
}
<\\/script>
`
}
}
}
},
components: {
LiveEditor
}
}
</script>

322
src/views/rating/RatingDoc.vue
View File

@ -1,199 +1,157 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="RatingDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import Rating from 'primevue/rating';
</code></pre>
<h5>Getting Started</h5>
<p>Two-way value binding is defined using v-model.</p>
<h5>Getting Started</h5>
<p>Two-way value binding is defined using v-model.</p>
<pre v-code><code>
&lt;Rating v-model="val" /&gt;
</code></pre>
<h5>Number of Stars</h5>
<p>Number of stars to display is defined with <i>stars</i> property, default is 5.</p>
<h5>Number of Stars</h5>
<p>Number of stars to display is defined with <i>stars</i> property, default is 5.</p>
<pre v-code><code>
&lt;Rating v-model="val" :stars="7"/&gt;
</code></pre>
<h5>Cancel</h5>
<p>A cancel icon is displayed to reset the value by default, set <i>cancel</i> as false to remove this option.</p>
<h5>Cancel</h5>
<p>A cancel icon is displayed to reset the value by default, set <i>cancel</i> as false to remove this option.</p>
<pre v-code><code>
&lt;Rating v-model="val" :cancel="false" /&gt;
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>number</td>
<td>null</td>
<td>Value of the rating.</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the element should be disabled.</td>
</tr>
<tr>
<td>readonly</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that component is read-only.</td>
</tr>
<tr>
<td>stars</td>
<td>number</td>
<td>5</td>
<td>Number of stars.</td>
</tr>
<tr>
<td>cancel</td>
<td>boolean</td>
<td>true</td>
<td>When specified a cancel icon is displayed to allow clearing the value.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>number</td>
<td>null</td>
<td>Value of the rating.</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the element should be disabled.</td>
</tr>
<tr>
<td>readonly</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that component is read-only.</td>
</tr>
<tr>
<td>stars</td>
<td>number</td>
<td>5</td>
<td>Number of stars.</td>
</tr>
<tr>
<td>cancel</td>
<td>boolean</td>
<td>true</td>
<td>When specified a cancel icon is displayed to allow clearing the value.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>change</td>
<td>event.originalEvent: Original event <br />
event.value: Selected option value </td>
<td>Callback to invoke on value change.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>change</td>
<td>event.originalEvent: Original event <br />
event.value: Selected option value </td>
<td>Callback to invoke on value change.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-rating</td>
<td>Container element</td>
</tr>
<tr>
<td>p-rating-star</td>
<td>Star element</td>
</tr>
<tr>
<td>p-rating-star-on</td>
<td>Selected star element.</td>
</tr>
<tr>
<td>p-rating-cancel</td>
<td>Cancel icon.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-rating</td>
<td>Container element</td>
</tr>
<tr>
<td>p-rating-star</td>
<td>Star element</td>
</tr>
<tr>
<td>p-rating-star-on</td>
<td>Selected star element.</td>
</tr>
<tr>
<td>p-rating-cancel</td>
<td>Cancel icon.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/rating" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="RatingDemo" :sources="sources" />
</div>
<pre v-code><code><template v-pre>
&lt;h3&gt;Basic {{val1}}&lt;/h3&gt;
&lt;Rating v-model="val1" /&gt;
&lt;h3&gt;Without Cancel&lt;/h3&gt;
&lt;Rating v-model="val2" :cancel="false" /&gt;
&lt;h3&gt;ReadOnly&lt;/h3&gt;
&lt;Rating :modelValue="5" :readonly="true" :stars="10" :cancel="false" /&gt;
&lt;h3&gt;Disabled&lt;/h3&gt;
&lt;Rating :modelValue="8" :disabled="true" :stars="10" /&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
val1: null,
val2: 3,
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Basic {{val1}}</h5>
<Rating v-model="val1" />
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<h5>Basic {{val1}}</h5>
<Rating v-model="val1" />
<h5>Without Cancel</h5>
<Rating v-model="val2" :cancel="false" />
<h5>Without Cancel</h5>
<Rating v-model="val2" :cancel="false" />
<h5>ReadOnly</h5>
<Rating :modelValue="5" :readonly="true" :stars="10" :cancel="false" />
<h5>ReadOnly</h5>
<Rating :modelValue="5" :readonly="true" :stars="10" :cancel="false" />
<h5>Disabled</h5>
<Rating :modelValue="8" :disabled="true" :stars="10" />
</div>
</div>
<h5>Disabled</h5>
<Rating :modelValue="8" :disabled="true" :stars="10" />
</div>
</template>
@ -205,13 +163,45 @@ export default {
val2: 3,
}
}
}`
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<h5>Basic {{val1}}</h5>
<Rating v-model="val1" />
<h5>Without Cancel</h5>
<Rating v-model="val2" :cancel="false" />
<h5>ReadOnly</h5>
<Rating :modelValue="5" :readonly="true" :stars="10" :cancel="false" />
<h5>Disabled</h5>
<Rating :modelValue="8" :disabled="true" :stars="10" />
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const val1 = ref();
const val2 = ref(3);
return { val1, val2 }
}
}
<\\/script>
`
}
}
}
},
components: {
LiveEditor
}
}
</script>

385
src/views/selectbutton/SelectButtonDoc.vue
View File

@ -1,15 +1,13 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="SelectButtonDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import SelectButton from 'primevue/selectbutton';
</code></pre>
<h5>Getting Started</h5>
<p>SelectButton requires a value to bind and a collection of arbitrary objects along with the <i>optionLabel</i> property to specify the label property of the option.</p>
<h5>Getting Started</h5>
<p>SelectButton requires a value to bind and a collection of arbitrary objects along with the <i>optionLabel</i> property to specify the label property of the option.</p>
<pre v-code><code>
&lt;SelectButton v-model="selectedCity" :options="cities" optionLabel="name" /&gt;
@ -31,15 +29,15 @@ export default {
</code></pre>
<h5>Multiple</h5>
<p>SelectButton allows selecting only one item by default and setting <i>multiple</i> option enables choosing more than one item. In multiple case, model property should be an array.</p>
<h5>Multiple</h5>
<p>SelectButton allows selecting only one item by default and setting <i>multiple</i> option enables choosing more than one item. In multiple case, model property should be an array.</p>
<pre v-code><code>
&lt;SelectButton v-model="selectedCity" :options="cities" optionLabel="brand" :multiple="true" /&gt;
</code></pre>
<h5>Templating</h5>
<p>Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter.</p>
<h5>Templating</h5>
<p>Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter.</p>
<pre v-code><code><template v-pre>
&lt;SelectButton v-model="selectedCar" :options="cars" optionLabel="brand"&gt;
&lt;template #option="slotProps"&gt;
@ -52,201 +50,148 @@ export default {
</template>
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>options</td>
<td>array</td>
<td>null</td>
<td>An array of selectitems to display as the available options.</td>
</tr>
<tr>
<td>optionLabel</td>
<td>string</td>
<td>null</td>
<td>Property name or getter function to use as the label of an option.</td>
</tr>
<tr>
<td>optionValue</td>
<td>string</td>
<td>null</td>
<td>Property name or getter function to use as the value of an option, defaults to the option itself when not defined.</td>
</tr>
<tr>
<td>optionDisabled</td>
<td>boolean</td>
<td>null</td>
<td>Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.</td>
</tr>
<tr>
<td>multiple</td>
<td>boolean</td>
<td>false</td>
<td>When specified, allows selecting multiple values.</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the element should be disabled.</td>
</tr>
<tr>
<td>dataKey</td>
<td>string</td>
<td>null</td>
<td>A property to uniquely identify an option.</td>
</tr>
<tr>
<td>ariaLabelledBy</td>
<td>string</td>
<td>null</td>
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>options</td>
<td>array</td>
<td>null</td>
<td>An array of selectitems to display as the available options.</td>
</tr>
<tr>
<td>optionLabel</td>
<td>string</td>
<td>null</td>
<td>Property name or getter function to use as the label of an option.</td>
</tr>
<tr>
<td>optionValue</td>
<td>string</td>
<td>null</td>
<td>Property name or getter function to use as the value of an option, defaults to the option itself when not defined.</td>
</tr>
<tr>
<td>optionDisabled</td>
<td>boolean</td>
<td>null</td>
<td>Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.</td>
</tr>
<tr>
<td>multiple</td>
<td>boolean</td>
<td>false</td>
<td>When specified, allows selecting multiple values.</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the element should be disabled.</td>
</tr>
<tr>
<td>dataKey</td>
<td>string</td>
<td>null</td>
<td>A property to uniquely identify an option.</td>
</tr>
<tr>
<td>ariaLabelledBy</td>
<td>string</td>
<td>null</td>
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>focus</td>
<td>event: Browser event</td>
<td>Callback to invoke on focus.</td>
</tr>
<tr>
<td>blur</td>
<td>event: Browser event</td>
<td>Callback to invoke on blur.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>focus</td>
<td>event: Browser event</td>
<td>Callback to invoke on focus.</td>
</tr>
<tr>
<td>blur</td>
<td>event: Browser event</td>
<td>Callback to invoke on blur.</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>option</td>
<td>option: Option instance<br />
index: Index of the option</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>option</td>
<td>option: Option instance<br />
index: Index of the option</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/selectbutton" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="SelectButtonDemo" :sources="sources"/>
</div>
<pre v-code><code><template v-pre>
&lt;h5&gt;Single Selection&lt;/h5&gt;
&lt;SelectButton v-model="value1" :options="options" /&gt;
&lt;h5&gt;Multiple Selection&lt;/h5&gt;
&lt;SelectButton v-model="value2" :options="paymentOptions" optionLabel="name" multiple /&gt;
&lt;h5&gt;Custom Content&lt;/h5&gt;
&lt;SelectButton v-model="value3" :options="justifyOptions" dataKey="value"&gt;
&lt;template #option="slotProps"&gt;
&lt;i :class="slotProps.option.icon"&gt;&lt;/i&gt;
&lt;/template&gt;
&lt;/SelectButton&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
value1: 'Off',
value2: null,
value3: null,
options: ['Off', 'On'],
paymentOptions: [
{name: 'Option 1', value: 1},
{name: 'Option 2', value: 2},
{name: 'Option 3', value: 3}
],
justifyOptions: [
{icon: 'pi pi-align-left', value: 'left'},
{icon: 'pi pi-align-right', value: 'Right'},
{icon: 'pi pi-align-center', value: 'Center'},
{icon: 'pi pi-align-justify', value: 'Justify'}]
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Single Selection</h5>
<SelectButton v-model="value1" :options="options" />
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<h5>Single Selection</h5>
<SelectButton v-model="value1" :options="options" />
<h5>Multiple Selection</h5>
<SelectButton v-model="value2" :options="paymentOptions" optionLabel="name" multiple />
<h5>Multiple Selection</h5>
<SelectButton v-model="value2" :options="paymentOptions" optionLabel="name" multiple />
<h5>Custom Content</h5>
<SelectButton v-model="value3" :options="justifyOptions" dataKey="value">
<template #option="slotProps">
<i :class="slotProps.option.icon"></i>
</template>
</SelectButton>
</div>
</div>
<h5>Custom Content</h5>
<SelectButton v-model="value3" :options="justifyOptions" dataKey="value">
<template #option="slotProps">
<i :class="slotProps.option.icon"></i>
</template>
</SelectButton>
</div>
</template>
@ -270,13 +215,59 @@ export default {
{icon: 'pi pi-align-justify', value: 'Justify'}]
}
}
}`
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<h5>Single Selection</h5>
<SelectButton v-model="value1" :options="options" />
<h5>Multiple Selection</h5>
<SelectButton v-model="value2" :options="paymentOptions" optionLabel="name" multiple />
<h5>Custom Content</h5>
<SelectButton v-model="value3" :options="justifyOptions" dataKey="value">
<template #option="slotProps">
<i :class="slotProps.option.icon"></i>
</template>
</SelectButton>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const value1 = ref('Off');
const value2 = ref();
const value3 = ref();
const options = ref(['Off', 'On']);
const paymentOptions = ref([
{name: 'Option 1', value: 1},
{name: 'Option 2', value: 2},
{name: 'Option 3', value: 3}
]);
const justifyOptions = ref([
{icon: 'pi pi-align-left', value: 'left'},
{icon: 'pi pi-align-right', value: 'Right'},
{icon: 'pi pi-align-center', value: 'Center'},
{icon: 'pi pi-align-justify', value: 'Justify'}
]);
return { value1, value2, value3, options, paymentOptions, justifyOptions }
}
}
<\\/script>
`
}
}
}
},
components: {
LiveEditor
}
}
</script>

405
src/views/slider/SliderDoc.vue
View File

@ -1,22 +1,20 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="SliderDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import Slider from 'primevue/slider';
</code></pre>
<h5>Getting Started</h5>
<p>Two-way binding is defined using the standard v-model directive.</p>
<h5>Getting Started</h5>
<p>Two-way binding is defined using the standard v-model directive.</p>
<pre v-code><code>
&lt;Slider v-model="value" /&gt;
</code></pre>
<h5>Range</h5>
<p>Range slider provides two handles to define two values. Enable <i>range</i> property and bind an array to implement a range slider.</p>
<h5>Range</h5>
<p>Range slider provides two handles to define two values. Enable <i>range</i> property and bind an array to implement a range slider.</p>
<pre v-code><code>
&lt;Slider v-model="value" :range="true" /&gt;
@ -34,231 +32,173 @@ export default {
</code></pre>
<h5>Orientation</h5>
<p>Default layout of slider is horizontal, use <i>orientation</i> property for the alternative vertical mode.</p>
<h5>Orientation</h5>
<p>Default layout of slider is horizontal, use <i>orientation</i> property for the alternative vertical mode.</p>
<pre v-code><code>
&lt;Slider v-model="value" orientation="vertical" /&gt;
</code></pre>
<h5>Step</h5>
<p>Step factor is 1 by default and can be customized with <i>step</i> option.</p>
<h5>Step</h5>
<p>Step factor is 1 by default and can be customized with <i>step</i> option.</p>
<pre v-code><code>
&lt;Slider v-model="value" :step="20" /&gt;
</code></pre>
<h5>Min-Max</h5>
<p>Boundaries are specified with min and max attributes.</p>
<h5>Min-Max</h5>
<p>Boundaries are specified with min and max attributes.</p>
<pre v-code><code>
&lt;Slider v-model="value" :step="20" :min="50" :max="200" /&gt;
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>number</td>
<td>0</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>min</td>
<td>number</td>
<td>0</td>
<td>Mininum boundary value.</td>
</tr>
<tr>
<td>max</td>
<td>number</td>
<td>100</td>
<td>Maximum boundary value.</td>
</tr>
<tr>
<td>orientation</td>
<td>string</td>
<td>horizontal</td>
<td>Orientation of the slider, valid values are horizontal and vertical.</td>
</tr>
<tr>
<td>step</td>
<td>number</td>
<td>1</td>
<td>Step factor to increment/decrement the value.</td>
</tr>
<tr>
<td>range</td>
<td>boolean</td>
<td>false</td>
<td>When speficed, allows two boundary values to be picked.</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the component should be disabled.</td>
</tr>
<tr>
<td>ariaLabelledBy</td>
<td>string</td>
<td>null</td>
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>number</td>
<td>0</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>min</td>
<td>number</td>
<td>0</td>
<td>Mininum boundary value.</td>
</tr>
<tr>
<td>max</td>
<td>number</td>
<td>100</td>
<td>Maximum boundary value.</td>
</tr>
<tr>
<td>orientation</td>
<td>string</td>
<td>horizontal</td>
<td>Orientation of the slider, valid values are horizontal and vertical.</td>
</tr>
<tr>
<td>step</td>
<td>number</td>
<td>1</td>
<td>Step factor to increment/decrement the value.</td>
</tr>
<tr>
<td>range</td>
<td>boolean</td>
<td>false</td>
<td>When speficed, allows two boundary values to be picked.</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the component should be disabled.</td>
</tr>
<tr>
<td>ariaLabelledBy</td>
<td>string</td>
<td>null</td>
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>change</td>
<td>event.originalEvent: Original event <br />
event.value: Selected option value </td>
<td>Callback to invoke on value change.</td>
</tr>
<tr>
<td>slideEnd</td>
<td>event.originalEvent: Slide event <br />
event.value: New value.
</td>
<td>Callback to invoke when slide ends.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>change</td>
<td>event.originalEvent: Original event <br />
event.value: Selected option value </td>
<td>Callback to invoke on value change.</td>
</tr>
<tr>
<td>slideEnd</td>
<td>event.originalEvent: Slide event <br />
event.value: New value.
</td>
<td>Callback to invoke when slide ends.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-slider</td>
<td>Container element</td>
</tr>
<tr>
<td>p-slider-handle</td>
<td>Handle element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-slider</td>
<td>Container element</td>
</tr>
<tr>
<td>p-slider-handle</td>
<td>Handle element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/slider" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="SliderDemo" :sources="sources" :components="['InputText']" />
</div>
<pre v-code><code><template v-pre>
&lt;h3&gt;Basic: {{value1}}&lt;/h3&gt;
&lt;Slider v-model="value1" /&gt;
&lt;h3&gt;Input: {{value2}}&lt;/h3&gt;
&lt;InputText v-model.number="value2" /&gt;
&lt;Slider v-model="value2" /&gt;
&lt;h3&gt;Step: {{value3}}&lt;/h3&gt;
&lt;Slider v-model="value3" :step="20" /&gt;
&lt;h3&gt;Range: {{value4}}&lt;/h3&gt;
&lt;Slider v-model="value4" :range="true" /&gt;
&lt;h3&gt;Vertical: {{value5}}&lt;/h3&gt;
&lt;Slider v-model="value5" orientation="vertical" /&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
value1: null,
value2: 50,
value3: 20,
value4: [20,80],
value5: 50
}
}
}
</code></pre>
<pre v-code.css><code>
.p-slider-horizontal, .p-inputtext {
width: 14rem;
}
.p-slider-vertical {
height: 14rem;
}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Basic: {{value1}}</h5>
<Slider v-model="value1" />
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<h5>Basic: {{value1}}</h5>
<Slider v-model="value1" />
<h5>Input: {{value2}}</h5>
<InputText v-model.number="value2" />
<Slider v-model="value2" />
<h5>Input: {{value2}}</h5>
<InputText v-model.number="value2" />
<Slider v-model="value2" />
<h5>Step: {{value3}}</h5>
<Slider v-model="value3" :step="20" />
<h5>Step: {{value3}}</h5>
<Slider v-model="value3" :step="20" />
<h5>Range: {{value4}}</h5>
<Slider v-model="value4" :range="true" />
<h5>Range: {{value4}}</h5>
<Slider v-model="value4" :range="true" />
<h5>Vertical: {{value5}}</h5>
<Slider v-model="value5" orientation="vertical" />
</div>
</div>
<h5>Vertical: {{value5}}</h5>
<Slider v-model="value5" orientation="vertical" />
</div>
</template>
@ -273,8 +213,58 @@ export default {
value5: 50
}
}
}`,
style: `<style scoped>
}
<\\/script>
<style scoped>
.p-slider-horizontal, .p-inputtext {
width: 14rem;
}
.p-slider-vertical {
height: 14rem;
}
</style>`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<h5>Basic: {{value1}}</h5>
<Slider v-model="value1" />
<h5>Input: {{value2}}</h5>
<InputText v-model.number="value2" />
<Slider v-model="value2" />
<h5>Step: {{value3}}</h5>
<Slider v-model="value3" :step="20" />
<h5>Range: {{value4}}</h5>
<Slider v-model="value4" :range="true" />
<h5>Vertical: {{value5}}</h5>
<Slider v-model="value5" orientation="vertical" />
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const value1 = ref(null);
const value2 = ref(50);
const value3 = ref(20);
const value4 = ref([20,80]);
const value5 = ref(50);
return { value1, value2, value3, value4, value5 }
}
}
<\\/script>
<style scoped>
.p-slider-horizontal, .p-inputtext {
width: 14rem;
}
@ -285,9 +275,6 @@ export default {
}
}
}
},
components: {
LiveEditor
}
}
</script>

214
src/views/textarea/TextareaDoc.vue
View File

@ -1,139 +1,99 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="TextareaDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import Textarea from 'primevue/textarea';
</code></pre>
<h5>Getting Started</h5>
<p>A model can be bound using the standard v-model directive.</p>
<h5>Getting Started</h5>
<p>A model can be bound using the standard v-model directive.</p>
<pre v-code><code>
&lt;Textarea v-model="value" rows="5" cols="30" /&gt;
</code></pre>
<h5>AutoResize</h5>
<p>In auto resize mode, textarea grows instead of displaying a scrollbar.</p>
<h5>AutoResize</h5>
<p>In auto resize mode, textarea grows instead of displaying a scrollbar.</p>
<pre v-code><code>
&lt;Textarea v-model="value" :autoResize="true" rows="5" cols="30" /&gt;
</code></pre>
<h5>Properties</h5>
<p>Textarea passes any attribute to the underlying textarea element, additional attributes are the following.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>autoResize</td>
<td>boolean</td>
<td>false</td>
<td>When present, height of textarea changes as being typed.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Textarea passes any attribute to the underlying textarea element, additional attributes are the following.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>autoResize</td>
<td>boolean</td>
<td>false</td>
<td>When present, height of textarea changes as being typed.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
<h5>Events</h5>
<p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-inputtextarea</td>
<td>Textarea element</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-inputtextarea</td>
<td>Textarea element</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/textarea" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="TextareaDemo" :sources="sources"/>
</div>
<pre v-code><code><template v-pre>
&lt;h3&gt;Basic&lt;/h3&gt;
&lt;Textarea v-model="value1" rows="5" cols="30" /&gt;
&lt;h3&gt;Auto Resize&lt;/h3&gt;
&lt;Textarea v-model="value2" :autoResize="true" rows="5" cols="30" /&gt;
&lt;h3&gt;Disabled&lt;/h3&gt;
&lt;Textarea v-model="value3" disabled rows="5" cols="30" /&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
value1: '',
value2: '',
value3: ''
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Basic</h5>
<Textarea v-model="value1" rows="5" cols="30" />
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<h5>Basic</h5>
<Textarea v-model="value1" rows="5" cols="30" />
<h5>Auto Resize</h5>
<Textarea v-model="value2" :autoResize="true" rows="5" cols="30" />
<h5>Auto Resize</h5>
<Textarea v-model="value2" :autoResize="true" rows="5" cols="30" />
<h5>Disabled</h5>
<Textarea v-model="value3" disabled rows="5" cols="30" />
</div>
</div>
<h5>Disabled</h5>
<Textarea v-model="value3" disabled rows="5" cols="30" />
</div>
</template>
@ -146,13 +106,43 @@ export default {
value3: ''
}
}
}`
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<h5>Basic</h5>
<Textarea v-model="value1" rows="5" cols="30" />
<h5>Auto Resize</h5>
<Textarea v-model="value2" :autoResize="true" rows="5" cols="30" />
<h5>Disabled</h5>
<Textarea v-model="value3" disabled rows="5" cols="30" />
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const value1 = ref('');
const value2 = ref('');
const value3 = ref('');
return { value1, value2, value3 }
}
}
<\\/script>
`
}
}
}
},
components: {
LiveEditor
}
}
</script>

302
src/views/togglebutton/ToggleButtonDoc.vue
View File

@ -1,21 +1,19 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="ToggleButtonDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import ToggleButton from 'primevue/togglebutton';
</code></pre>
<h5>Getting Started</h5>
<p>Two-way binding to a boolean property is defined using the standard v-model directive.</p>
<h5>Getting Started</h5>
<p>Two-way binding to a boolean property is defined using the standard v-model directive.</p>
<pre v-code><code>
&lt;ToggleButton v-model="checked" /&gt;
</code></pre>
<p>As model is two-way binding enabled, setting the bound value as true displays the state as checked.</p>
<p>As model is two-way binding enabled, setting the bound value as true displays the state as checked.</p>
<pre v-code.script><code>
export default {
data() {
@ -27,167 +25,133 @@ export default {
</code></pre>
<h5>Labels and Icons</h5>
<p>Icons and Labels can be customized using <i>onLabel</i>, <i>offLabel</i>, <i>onIcon</i> and <i>offIcon</i> properties.</p>
<h5>Labels and Icons</h5>
<p>Icons and Labels can be customized using <i>onLabel</i>, <i>offLabel</i>, <i>onIcon</i> and <i>offIcon</i> properties.</p>
<pre v-code><code>
&lt;ToggleButton v-model="checked" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" /&gt;
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>onIcon</td>
<td>string</td>
<td>null</td>
<td>Icon for the on state.</td>
</tr>
<tr>
<td>offIcon</td>
<td>string</td>
<td>null</td>
<td>Icon for the off state.</td>
</tr>
<tr>
<td>onLabel</td>
<td>string</td>
<td>yes</td>
<td>Label for the on state.</td>
</tr>
<tr>
<td>offLabel</td>
<td>string</td>
<td>no</td>
<td>Label for the off state.</td>
</tr>
<tr>
<td>iconPos</td>
<td>string</td>
<td>left</td>
<td>Position of the icon, valid values are "left" and "right".</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>onIcon</td>
<td>string</td>
<td>null</td>
<td>Icon for the on state.</td>
</tr>
<tr>
<td>offIcon</td>
<td>string</td>
<td>null</td>
<td>Icon for the off state.</td>
</tr>
<tr>
<td>onLabel</td>
<td>string</td>
<td>yes</td>
<td>Label for the on state.</td>
</tr>
<tr>
<td>offLabel</td>
<td>string</td>
<td>no</td>
<td>Label for the off state.</td>
</tr>
<tr>
<td>iconPos</td>
<td>string</td>
<td>left</td>
<td>Position of the icon, valid values are "left" and "right".</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>change</td>
<td>event: Browser event</td>
<td>Callback to invoke on value change.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>change</td>
<td>event: Browser event</td>
<td>Callback to invoke on value change.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-togglebutton</td>
<td>Container element</td>
</tr>
<tr>
<td>p-button-icon</td>
<td>Icon element.</td>
</tr>
<tr>
<td>p-button-text</td>
<td>Label element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-togglebutton</td>
<td>Container element</td>
</tr>
<tr>
<td>p-button-icon</td>
<td>Icon element.</td>
</tr>
<tr>
<td>p-button-text</td>
<td>Label element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/togglebutton" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="ToggleButtonDemo" :sources="sources"/>
</div>
<pre v-code><code><template v-pre>
&lt;h3&gt;Basic&lt;/h3&gt;
&lt;ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" /&gt;
&lt;h3&gt;Customized&lt;/h3&gt;
&lt;ToggleButton v-model="checked2" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" style="width: 10em" /&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
checked1: false,
checked2: true
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Basic</h5>
<ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" />
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<h5>Basic</h5>
<ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" />
<h5>Customized</h5>
<ToggleButton v-model="checked2" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" style="width: 10em" />
</div>
</div>
<h5>Customized</h5>
<ToggleButton v-model="checked2" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" style="width: 10em" />
</div>
</template>
@ -199,13 +163,39 @@ export default {
checked2: true
}
}
}`
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<h5>Basic</h5>
<ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" />
<h5>Customized</h5>
<ToggleButton v-model="checked2" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" style="width: 10em" />
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const checked1 = ref(false);
const checked2 = ref(true);
return { checked1, checked2 }
}
}
<\\/script>
`
}
}
}
},
components: {
LiveEditor
}
}
</script>

200
src/views/tristatecheckbox/TriStateCheckboxDoc.vue
View File

@ -1,127 +1,92 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="TriStateCheckboxDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import TriStateCheckbox from 'primevue/tristatecheckbox';
</code></pre>
<h5>Getting Started</h5>
<p>A model can be bound using the standard v-model directive.</p>
<h5>Getting Started</h5>
<p>A model can be bound using the standard v-model directive.</p>
<pre v-code><code>
&lt;TriStateCheckbox v-model="value" /&gt;
</code></pre>
<h5>Properties</h5>
<p>Any property such as name and autofocus are passed to the underlying input element. Following is the additional property to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>boolean</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property such as name and autofocus are passed to the underlying input element. Following is the additional property to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>boolean</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<p>Any valid event such as focus and blur.</p>
<h5>Events</h5>
<p>Any valid event such as focus and blur.</p>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-chkbox</td>
<td>Container element</td>
</tr>
<tr>
<td>p-tristatechkbox</td>
<td>Container element</td>
</tr>
<tr>
<td>p-chkbox-box</td>
<td>Container of icon.</td>
</tr>
<tr>
<td>p-chkbox-icon</td>
<td>Icon element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-chkbox</td>
<td>Container element</td>
</tr>
<tr>
<td>p-tristatechkbox</td>
<td>Container element</td>
</tr>
<tr>
<td>p-chkbox-box</td>
<td>Container of icon.</td>
</tr>
<tr>
<td>p-chkbox-icon</td>
<td>Icon element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/tristatecheckbox" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="TriStateCheckboxDemo" :sources="sources"/>
</div>
<pre v-code><code><template v-pre>
&lt;div class="p-field-checkbox p-m-0"&gt;
&lt;TriStateCheckbox v-model="value" /&gt;
&lt;label&gt;{{value == null ? 'null' : value}}&lt;/label&gt;
&lt;/div&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
value: null
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
'options-api': {
tabName: 'Source',
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<div class="p-field-checkbox p-m-0">
<TriStateCheckbox v-model="value" />
<label>{{value == null ? 'null' : value}}</label>
</div>
</div>
<div class="card">
<div class="p-field-checkbox p-m-0">
<TriStateCheckbox v-model="value" />
<label>{{value == null ? 'null' : value}}</label>
</div>
</div>
</template>
@ -133,13 +98,36 @@ export default {
value: null
}
}
}`
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API',
content: `<template>
<div class="card">
<div class="p-field-checkbox p-m-0">
<TriStateCheckbox v-model="value" />
<label>{{value == null ? 'null' : value}}</label>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const value = ref(null);
return { value }
}
}
<\\/script>
`
}
}
}
},
components: {
LiveEditor
}
}
</script>