vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-10 17:32:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Doc update

Browse source
This commit is contained in:
Cagatay Civici 2020-09-21 15:27:08 +03:00
parent 2855620131
commit e27dfcf54e
44 changed files with 129 additions and 432 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/autocomplete/AutoComplete.d.ts vendored
View file

@ -1,7 +1,7 @@
import Vue, { VNode } from 'vue';
export declare class AutoComplete extends Vue {
value?: any;
modelValue?: any;
suggestions?: any[];
field?: string;
scrollHeight?: string;
@ -10,16 +10,12 @@ export declare class AutoComplete extends Vue {
multiple?: boolean;
minLength?: number;
delay?: number;
ariaLabelledBy?: string;
appendTo?: string;
$emit(eventName: 'input', value: any): this;
$emit(eventName: 'item-select', e: {originalEvent: Event, value: any}): this;
$emit(eventName: 'item-unselect', e: {originalEvent: Event, value: any}): this;
$emit(eventName: 'dropdown-click', e: {originalEvent: Event, query: string}): this;
$emit(eventName: 'complete', e: {originalEvent: Event, query: string}): this;
$emit(eventName: 'clear'): this;
$emit(eventName: 'focus', event: Event): this;
$emit(eventName: 'blur', event: Event): this;
$slots: {
list: VNode[];
};

8
src/components/autocomplete/AutoComplete.vue
View file

@ -1,7 +1,7 @@
<template>
<span :class="containerClass" aria-haspopup="listbox" :aria-owns="listId" :aria-expanded="overlayVisible" :style="style">
<input ref="input" :class="inputClass" v-bind="$attrs" :value="inputValue" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" type="text" autoComplete="off" v-if="!multiple"
role="searchbox" aria-autocomplete="list" :aria-controls="listId" :aria-labelledby="ariaLabelledBy">
role="searchbox" aria-autocomplete="list" :aria-controls="listId">
<ul ref="multiContainer" :class="multiContainerClass" v-if="multiple" @click="onMultiContainerClick">
<li v-for="(item, i) of modelValue" :key="i" class="p-autocomplete-token">
<span class="p-autocomplete-token-label">{{getItemContent(item)}}</span>
@ -9,7 +9,7 @@
</li>
<li class="p-autocomplete-input-token">
<input ref="input" type="text" autoComplete="off" v-bind="$attrs" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown"
role="searchbox" aria-autocomplete="list" :aria-controls="listId" :aria-labelledby="ariaLabelledBy">
role="searchbox" aria-autocomplete="list" :aria-controls="listId">
</li>
</ul>
<i class="p-autocomplete-loader pi pi-spinner pi-spin" v-if="searching"></i>
@ -71,10 +71,6 @@ export default {
type: Number,
default: 300
},
ariaLabelledBy: {
type: String,
default: null
},
appendTo: {
type: String,
default: null

7
src/components/calendar/Calendar.d.ts vendored
View file

@ -14,7 +14,7 @@ export interface LocaleSettings {
}
export declare class Calendar extends Vue {
value?: Date | Date[];
modelValue?: Date | Date[];
selectionMode?: string;
dateFormat?: string;
inline?: boolean;
@ -52,19 +52,14 @@ export declare class Calendar extends Vue {
showWeek?: boolean;
manualInput?: boolean;
locale?: LocaleSettings;
ariaLabelledBy?: string;
appendTo?: string;
$emit(eventName: 'show'): this;
$emit(eventName: 'hide'): this;
$emit(eventName: 'month-change', e: { month: number, year: number }): this;
$emit(eventName: 'year-change', e: { month: number, year: number }): this;
$emit(eventName: 'date-select', value: Date): this;
$emit(eventName: 'input', value: Date): this;
$emit(eventName: 'today-click', value: Date): this;
$emit(eventName: 'clear-click', event: Event): this;
$emit(eventName: 'focus', event: Event): this;
$emit(eventName: 'blur', event: Event): this;
$emit(eventName: 'keydown', event: Event): this;
$slots: {
header: VNode[];
date: VNode[];

8
src/components/calendar/Calendar.vue
View file

@ -1,9 +1,9 @@
<template>
<span :class="containerClass" :style="style">
<CalendarInputText ref="input" v-if="!inline" type="text" v-bind="$attrs" :value="inputFieldValue" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :readonly="!manualInput" :aria-labelledby="ariaLabelledBy" inputmode="none" />
<CalendarInputText ref="input" v-if="!inline" type="text" v-bind="$attrs" :value="inputFieldValue" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :readonly="!manualInput" inputmode="none" />
<CalendarButton v-if="showIcon" :icon="icon" tabindex="-1" class="p-datepicker-trigger" :disabled="$attrs.disabled" @click="onButtonClick" type="button" :aria-label="inputFieldValue"/>
<transition name="p-connected-overlay" @enter="onOverlayEnter($event)" @after-enter="onOverlayEnterComplete" @leave="onOverlayLeave">
<div :ref="overlayRef" :class="panelStyleClass" v-if="inline ? true : overlayVisible" :role="inline ? null : 'dialog'" :aria-labelledby="ariaLabelledBy">
<div :ref="overlayRef" :class="panelStyleClass" v-if="inline ? true : overlayVisible" :role="inline ? null : 'dialog'">
<template v-if="!timeOnly">
<div class="p-datepicker-group-container">
<div class="p-datepicker-group" v-for="(month,groupIndex) of months" :key="month.month + month.year">
@ -300,10 +300,6 @@ export default {
}
}
},
ariaLabelledBy: {
type: String,
default: null
},
appendTo: {
type: String,
default: null

6
src/components/checkbox/Checkbox.d.ts vendored
View file

@ -4,9 +4,5 @@ export declare class Checkbox extends Vue {
value?: null;
modelValue?: null;
binary?: boolean;
$emit(eventName: 'click', event: Event): this;
$emit(eventName: 'input', value: any): this;
$emit(eventName: 'change', event: Event): this;
$emit(eventName: 'focus', event: Event): this;
$emit(eventName: 'blur', event: Event): this;
$emit(eventName: string, event: Event): this;
}

7
src/components/chips/Chips.d.ts vendored
View file

@ -1,16 +1,11 @@
import Vue, { VNode } from 'vue';
export declare class Chips extends Vue {
value?: any[];
modelValue?: any[];
max?: number;
ariaLabelledBy?: string;
addOnBlur?: boolean;
allowDuplicate?: boolean;
separator?: string;
placeholder?: string;
$emit(eventName: 'focus', event: Event): this;
$emit(eventName: 'blur', event: Event): this;
$emit(eventName: 'input', value: any[]): this;
$emit(eventName: 'add', e: { originalEvent: Event, value: any }): this;
$emit(eventName: 'remove', e: { originalEvent: Event, value: any }): this;
$slots: {

10
src/components/chips/Chips.vue
View file

@ -9,7 +9,7 @@
</li>
<li class="p-chips-input-token">
<input ref="input" type="text" v-bind="$attrs" @focus="onFocus" @blur="onBlur($event)" @input="onInput" @keydown="onKeyDown($event)" @paste="onPaste($event)"
:placeholder="placeholder" :disabled="$attrs.disabled || maxedOut" :aria-labelledby="ariaLabelledBy">
:disabled="$attrs.disabled || maxedOut">
</li>
</ul>
</div>
@ -31,10 +31,6 @@ export default {
type: String,
default: null
},
ariaLabelledBy: {
type: String,
default: null
},
addOnBlur: {
type: Boolean,
default: null
@ -43,10 +39,6 @@ export default {
type: Boolean,
default: true
},
placeholder: {
type: String,
default: null
},
class: null,
style: null
},

2
src/components/colorpicker/ColorPicker.d.ts vendored
View file

@ -1,7 +1,7 @@
import Vue, { VNode } from 'vue';
export declare class ColorPicker extends Vue {
value?: any;
modelValue?: any;
defaultColor?: any;
inline?: boolean;
format?: string;

2
src/components/dropdown/Dropdown.d.ts vendored
View file

@ -1,7 +1,7 @@
import Vue, { VNode } from 'vue';
export declare class Dropdown extends Vue {
value?: any;
modelValue?: any;
options?: any[];
optionLabel?: string;
optionValue?: any;

2
src/components/editor/Editor.d.ts vendored
View file

@ -1,7 +1,7 @@
import Vue, { VNode } from 'vue';
export declare class Editor extends Vue {
value?: string;
modelValue?: string;
placeholder?: string;
readonly?: boolean;
formats?: any[];

6
src/components/inputmask/InputMask.d.ts vendored
View file

@ -1,7 +1,11 @@
import Vue, { VNode } from 'vue';
export declare class InputMask extends Vue {
value?: string;
modelValue?: string;
slotChar?: string;
mask?: string;
autoClear?: boolean;
unmask?: boolean;
$emit(eventName: 'input', value: string): this;
$emit(eventName: 'focus', event: Event): this;
$emit(eventName: 'blur', event: Event): this;

2
src/components/inputnumber/InputNumber.d.ts vendored
View file

@ -1,7 +1,7 @@
import Vue from 'vue';
export declare class InputNumber extends Vue {
value?: number;
modelValue?: number;
format?: boolean;
showButtons?: boolean;
buttonLayout?: string;

11
src/components/inputswitch/InputSwitch.d.ts vendored
View file

@ -1,14 +1,5 @@
import Vue from 'vue';
export declare class InputSwitch extends Vue {
value?: boolean;
inputId?: string;
name?: string;
disabled?: boolean;
ariaLabelledBy?: string;
$emit(eventName: 'click', event: Event): this;
$emit(eventName: 'input', value: any): this;
$emit(eventName: 'change', event: Event): this;
$emit(eventName: 'focus', event: Event): this;
$emit(eventName: 'blur', event: Event): this;
modelValue?: boolean;
}

2
src/components/listbox/Listbox.d.ts vendored
View file

@ -1,7 +1,7 @@
import Vue, { VNode } from 'vue';
export declare class Listbox extends Vue {
value?: any;
modelValue?: any;
options?: any[];
optionLabel?: string;
optionValue?: any;

2
src/components/multiselect/MultiSelect.d.ts vendored
View file

@ -1,7 +1,7 @@
import Vue, {VNode} from 'vue';
export declare class MultiSelect extends Vue {
value?: any;
modelValue?: any;
options?: any[];
optionLabel?: string;
optionValue?: any;

7
src/components/password/Password.d.ts vendored
View file

@ -1,7 +1,7 @@
import Vue from 'vue';
export declare class Password extends Vue {
value?: string;
modelValue?: string;
promptLabel?: string;
mediumRegex?: string;
strongRegex?: string;
@ -9,8 +9,5 @@ export declare class Password extends Vue {
mediumLabel?: string;
strongLabel?: string;
feedback?: boolean;
$emit(eventName: 'input', value: any): this;
$emit(eventName: 'focus', event: Event): this;
$emit(eventName: 'blur', event: Event): this;
$emit(eventName: 'keydown', event: Event): this;
$emit(eventName: string, event: Event): this;
}

6
src/components/radiobutton/RadioButton.d.ts vendored
View file

@ -3,9 +3,5 @@ import Vue from 'vue';
export declare class RadioButton extends Vue {
value?: any;
modelValue?: any;
$emit(eventName: 'click', event: Event): this;
$emit(eventName: 'input', value: any): this;
$emit(eventName: 'change', event: Event): this;
$emit(eventName: 'focus', event: Event): this;
$emit(eventName: 'blur', event: Event): this;
$emit(eventName: string, event: Event): this;
}

3
src/components/rating/Rating.d.ts vendored
View file

@ -1,11 +1,10 @@
import Vue from 'vue';
export declare class Rating extends Vue {
value?: number;
modelValue?: number;
disabled?: boolean;
readonly?: boolean;
stars?: number;
cancel?: boolean;
$emit(eventName: 'input', value: any): this;
$emit(eventName: 'change', e: { originalEvent: Event, value: any }): this;
}

3
src/components/selectbutton/SelectButton.d.ts vendored
View file

@ -1,7 +1,7 @@
import Vue, { VNode } from 'vue';
export declare class SelectButton extends Vue {
value?: any;
modelValue?: any;
options?: any[];
optionLabel?: string;
optionValue?: any;
@ -10,7 +10,6 @@ export declare class SelectButton extends Vue {
disabled?: boolean;
dataKey?: string;
ariaLabelledBy?: string;
$emit(eventName: 'input', value: any): this;
$emit(eventName: 'focus', event: Event): this;
$emit(eventName: 'blur', event: Event): this;
$slots: {

3
src/components/slider/Slider.d.ts vendored
View file

@ -1,7 +1,7 @@
import Vue from 'vue';
export declare class Slider extends Vue {
value?: number | any[];
modelValue?: number | any[];
min?: number;
max?: number;
orientation?: string;
@ -9,7 +9,6 @@ export declare class Slider extends Vue {
range?: boolean;
disabled?: boolean;
ariaLabelledBy?: string;
$emit(eventName: 'input', value: any): this;
$emit(eventName: 'change', value: any): this;
$emit(eventName: 'slideend', e: {originalEvent: Event, values: any}): this;
}

1
src/components/togglebutton/ToggleButton.d.ts vendored
View file

@ -7,6 +7,5 @@ export declare class ToggleButton extends Vue {
onLabel?: string;
offLabel?: string;
iconPos?: string;
ariaLabelledBy?: string;
$emit(eventName: string, event: Event): this;
}

5
src/components/togglebutton/ToggleButton.vue
View file

@ -1,5 +1,5 @@
<template>
<div :class="buttonClass" @click="onClick($event)" role="checkbox" :aria-labelledby="ariaLabelledBy" :aria-checked="modelValue" :tabindex="$attrs.disabled ? null : '0'" v-ripple>
<div :class="buttonClass" @click="onClick($event)" role="checkbox" :aria-checked="modelValue" :tabindex="$attrs.disabled ? null : '0'" v-ripple>
<span v-if="hasIcon" :class="iconClass"></span>
<span class="p-button-label">{{label}}</span>
</div>
@ -18,8 +18,7 @@ export default {
iconPos: {
type: String,
default: 'left'
},
ariaLabelledBy: String
}
},
methods: {
onClick(event) {

9
src/components/tristatecheckbox/TriStateCheckbox.d.ts vendored
View file

@ -1,11 +1,6 @@
import Vue from 'vue';
export declare class TriStateCheckbox extends Vue {
value?: any;
ariaLabelledBy?: string;
$emit(eventName: 'click', event: Event): this;
$emit(eventName: 'input', value: any): this;
$emit(eventName: 'change', event: Event): this;
$emit(eventName: 'focus', event: Event): this;
$emit(eventName: 'blur', event: Event): this;
modelValue?: any;
$emit(eventName: string, event: Event): this;
}

8
src/views/autocomplete/AutoCompleteDoc.vue
View file

@ -83,7 +83,7 @@ export default {
</thead>
<tbody>
<tr>
<td>value</td>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</td>
@ -136,12 +136,6 @@ export default {
<td>300</td>
<td>Delay between keystrokes to wait before sending a query.</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>

8
src/views/calendar/CalendarDoc.vue
View file

@ -186,7 +186,7 @@ export default {
</thead>
<tbody>
<tr>
<td>value</td>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</td>
@ -407,12 +407,6 @@ export default {
<td>true</td>
<td>Wheter to allow prevents entering the date manually via typing.</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>

63
src/views/checkbox/CheckboxDoc.vue
View file

@ -16,10 +16,10 @@ import Checkbox from 'primevue/checkbox';
<h5>Multiple Values</h5>
<p>Multiple mode is enabled by default, v-model property refers to an array to bind the selected values.</p>
<CodeHighlight>
&lt;Checkbox id="city1" inputId="city1" name="city" value="Chicago" v-model="cities" /&gt;
&lt;Checkbox id="city2" inputId="city2" name="city" value="Los Angeles" v-model="cities" /&gt;
&lt;Checkbox id="city3" inputId="city3" name="city" value="New York" v-model="cities" /&gt;
&lt;Checkbox id="city4" inputId="city4" name="city" value="San Francisco" v-model="cities" /&gt;
&lt;Checkbox name="city" value="Chicago" v-model="cities" /&gt;
&lt;Checkbox name="city" value="Los Angeles" v-model="cities" /&gt;
&lt;Checkbox name="city" value="New York" v-model="cities" /&gt;
&lt;Checkbox name="city" value="San Francisco" v-model="cities" /&gt;
</CodeHighlight>
<CodeHighlight lang="js">
@ -54,6 +54,12 @@ export default {
<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>
@ -65,44 +71,7 @@ export default {
</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>
<tr>
<td>input</td>
<td>event: Value of checkbox</td>
<td>Callback to invoke on click.</td>
</tr>
<tr>
<td>click</td>
<td>event: Browser event</td>
<td>Callback to invoke click.</td>
</tr>
<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>
<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>
@ -116,20 +85,16 @@ export default {
</thead>
<tbody>
<tr>
<td>p-chkbox</td>
<td>p-checkbox</td>
<td>Container element</td>
</tr>
<tr>
<td>p-chkbox-box</td>
<td>p-checkbox-box</td>
<td>Container of icon.</td>
</tr>
<tr>
<td>p-chkbox-icon</td>
<td>p-checkbox-icon</td>
<td>Icon element.</td>
</tr>
<tr>
<td>p-chkbox-label</td>
<td>Label element.</td>
</tr>
</tbody>
</table>

66
src/views/chips/ChipsDoc.vue
View file

@ -29,7 +29,7 @@ import Chips from 'primevue/chips';
</CodeHighlight>
<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>
<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>
@ -41,6 +41,24 @@ import Chips from 'primevue/chips';
</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>
@ -52,42 +70,13 @@ import Chips from 'primevue/chips';
<td>boolean</td>
<td>true</td>
<td>Whether to allow duplicate values or not.</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>max</td>
<td>number</td>
<td>null</td>
<td>Maximum number of entries allowed.</td>
</tr>
<tr>
<td>value</td>
<td>array</td>
<td>null</td>
<td>Value of the component.</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>placeholder</td>
<td>string</td>
<td>null</td>
<td>Specifies a short hint that describes the expected value 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. Following are the additional events to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -98,21 +87,6 @@ import Chips from 'primevue/chips';
</tr>
</thead>
<tbody>
<tr>
<td>input</td>
<td>value: New value</td>
<td>Callback to invoke on value change.</td>
</tr>
<tr>
<td>focus</td>
<td>event: Browser event</td>
<td>Callback to invoke when the input is focused.</td>
</tr>
<tr>
<td>blur</td>
<td>event: Browser event</td>
<td>Callback to invoke when the input loses focus.</td>
</tr>
<tr>
<td>add</td>
<td>originalEvent: Browser event <br/>

24
src/views/colorpicker/ColorPickerDoc.vue
View file

@ -30,7 +30,7 @@ export default {
</CodeHighlight>
<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>
<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>
@ -43,7 +43,7 @@ export default {
</thead>
<tbody>
<tr>
<td>value</td>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</td>
@ -100,26 +100,6 @@ export default {
</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>input</td>
<td>value: New value</td>
<td>Callback to invoke on value change.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list style classed of the component.</p>
<div class="doc-tablewrapper">

2
src/views/dropdown/DropdownDoc.vue
View file

@ -77,7 +77,7 @@ data() {
</thead>
<tbody>
<tr>
<td>value</td>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</td>

2
src/views/editor/EditorDoc.vue
View file

@ -40,7 +40,7 @@ import Editor from 'primevue/editor';
</thead>
<tbody>
<tr>
<td>value</td>
<td>modelValue</td>
<td>string</td>
<td>null</td>
<td>Value of the content.</td>

6
src/views/inputmask/InputMaskDoc.vue
View file

@ -58,6 +58,12 @@ import InputMask from 'primevue/inputmask';
</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>

2
src/views/inputnumber/InputNumberDoc.vue
View file

@ -118,7 +118,7 @@ Vertical
</thead>
<tbody>
<tr>
<td>value</td>
<td>modelValue</td>
<td>number</td>
<td>null</td>
<td>Value of the component.</td>

67
src/views/inputswitch/InputSwitchDoc.vue
View file

@ -36,7 +36,7 @@ export default {
</CodeHighlight>
<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>
<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>
@ -49,78 +49,17 @@ export default {
</thead>
<tbody>
<tr>
<td>value</td>
<td>modelValue</td>
<td>boolean</td>
<td>null</td>
<td>Specifies whether a inputswitch should be checked or not.</td>
</tr>
<tr>
<td>inputId</td>
<td>string</td>
<td>null</td>
<td>Identifier of the input element.</td>
</tr>
<tr>
<td>name</td>
<td>string</td>
<td>null</td>
<td>Name of the input element.</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: Browser event.</td>
<td>Callback to invoke on value change.</td>
</tr>
<tr>
<td>click</td>
<td>event: Browser event.</td>
<td>Callback to invoke on click.</td>
</tr>
<tr>
<td>input</td>
<td>event: Checked state as a boolean.</td>
<td>Callback to invoke on value change.</td>
</tr>
<tr>
<td>focus</td>
<td>event: Browser event.</td>
<td>Callback to invoke when the element receives focus.</td>
</tr>
<tr>
<td>blur</td>
<td>event: Browser event.</td>
<td>Callback to invoke when the element loses focus.</td>
</tr>
</tbody>
</table>
</div>
<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>

22
src/views/inputtext/InputTextDoc.vue
View file

@ -76,7 +76,27 @@ import InputText from 'primevue/inputtext';
</CodeHighlight>
<h5>Properties</h5>
<p>InputText passes any valid attribute to the underlying input element.</p>
<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>

7
src/views/listbox/ListboxDoc.vue
View file

@ -71,7 +71,7 @@ data() {
</thead>
<tbody>
<tr>
<td>value</td>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</td>
@ -176,11 +176,6 @@ data() {
event.value: Selected option value </td>
<td>Callback to invoke on value change.</td>
</tr>
<tr>
<td>input</td>
<td>value: New value</td>
<td>Callback to invoke on value change.</td>
</tr>
<tr>
<td>filter</td>
<td>event.originalEvent: Original event <br />

7
src/views/multiselect/MultiSelectDoc.vue
View file

@ -77,7 +77,7 @@ data() {
</thead>
<tbody>
<tr>
<td>value</td>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</td>
@ -199,11 +199,6 @@ data() {
event.value: Selected option value </td>
<td>Callback to invoke on value change.</td>
</tr>
<tr>
<td>input</td>
<td>value: New value</td>
<td>Callback to invoke on value change.</td>
</tr>
<tr>
<td>before-show</td>
<td>-</td>

6
src/views/password/PasswordDoc.vue
View file

@ -48,6 +48,12 @@ import Password from 'primevue/password';
</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>

53
src/views/radiobutton/RadioButtonDoc.vue
View file

@ -10,8 +10,8 @@ import RadioButton from 'primevue/radiobutton';
<h5>Getting Started</h5>
<p>Two-way value binding is defined using the standard v-model directive.</p>
<CodeHighlight>
&lt;RadioButton inputId="city1" name="city" value="Chicago" v-model="city" /&gt;
&lt;RadioButton inputId="city2" name="city" value="Los Angeles" v-model="city" /&gt;
&lt;RadioButton name="city" value="Chicago" v-model="city" /&gt;
&lt;RadioButton name="city" value="Los Angeles" v-model="city" /&gt;
</CodeHighlight>
<CodeHighlight lang="js">
export default {
@ -48,53 +48,22 @@ export default {
<tbody>
<tr>
<td>value</td>
<td>boolean</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</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>
<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>
<tr>
<td>input</td>
<td>event: Value of checkbox</td>
<td>Callback to invoke on click.</td>
</tr>
<tr>
<td>click</td>
<td>event: Browser event</td>
<td>Callback to invoke click.</td>
</tr>
<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>
<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>

7
src/views/rating/RatingDoc.vue
View file

@ -39,7 +39,7 @@ import Rating from 'primevue/rating';
</thead>
<tbody>
<tr>
<td>value</td>
<td>modelValue</td>
<td>number</td>
<td>null</td>
<td>Value of the rating.</td>
@ -88,11 +88,6 @@ import Rating from 'primevue/rating';
<td>event.originalEvent: Original event <br />
event.value: Selected option value </td>
<td>Callback to invoke on value change.</td>
</tr>
<tr>
<td>input</td>
<td>value: New value</td>
<td>Callback to invoke on value change.</td>
</tr>
</tbody>
</table>

7
src/views/selectbutton/SelectButtonDoc.vue
View file

@ -63,7 +63,7 @@ export default {
</thead>
<tbody>
<tr>
<td>value</td>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</td>
@ -131,11 +131,6 @@ export default {
</tr>
</thead>
<tbody>
<tr>
<td>input</td>
<td>event: Single value or an array of values that are selected.</td>
<td>Callback to invoke on value change.</td>
</tr>
<tr>
<td>focus</td>
<td>event: Browser event</td>

7
src/views/slider/SliderDoc.vue
View file

@ -62,7 +62,7 @@ export default {
</thead>
<tbody>
<tr>
<td>value</td>
<td>modelValue</td>
<td>number</td>
<td>0</td>
<td>Value of the component.</td>
@ -130,11 +130,6 @@ export default {
event.value: Selected option value </td>
<td>Callback to invoke on value change.</td>
</tr>
<tr>
<td>input</td>
<td>value: New value</td>
<td>Callback to invoke on value change.</td>
</tr>
<tr>
<td>slideEnd</td>
<td>event.originalEvent: Slide event <br />

4
src/views/textarea/TextareaDoc.vue
View file

@ -20,7 +20,7 @@ import Textarea from 'primevue/textarea';
</CodeHighlight>
<h5>Properties</h5>
<p>InputTextarea passes any attribute to the underlying textarea element, additional attributes are the following.</p>
<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>
@ -33,7 +33,7 @@ import Textarea from 'primevue/textarea';
</thead>
<tbody>
<tr>
<td>value</td>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</td>

28
src/views/togglebutton/ToggleButtonDoc.vue
View file

@ -44,7 +44,7 @@ export default {
</thead>
<tbody>
<tr>
<td>value</td>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</td>
@ -78,12 +78,6 @@ export default {
<td>string</td>
<td>left</td>
<td>Position of the icon, valid values are "left" and "right".</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>
@ -104,26 +98,6 @@ export default {
<td>change</td>
<td>event: Browser event</td>
<td>Callback to invoke on value change.</td>
</tr>
<tr>
<td>input</td>
<td>event: Value as the checked state.</td>
<td>Callback to invoke on value change.</td>
</tr>
<tr>
<td>click</td>
<td>event: Browser event</td>
<td>Callback to invoke on click.</td>
</tr>
<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>

47
src/views/tristatecheckbox/TriStateCheckboxDoc.vue
View file

@ -27,60 +27,17 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
</thead>
<tbody>
<tr>
<td>value</td>
<td>modelValue</td>
<td>boolean</td>
<td>null</td>
<td>Value of the component.</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: Browser event</td>
<td>Callback to invoke on value change.</td>
</tr>
<tr>
<td>input</td>
<td>event: Value of checkbox</td>
<td>Callback to invoke on click.</td>
</tr>
<tr>
<td>click</td>
<td>event: Browser event</td>
<td>Callback to invoke click.</td>
</tr>
<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>
<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>