Doc update
parent
d0f13544be
commit
624b67350d
|
@ -9,9 +9,18 @@
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
value: Number,
|
value: {
|
||||||
disabled: Boolean,
|
type: Number,
|
||||||
readonly: Boolean,
|
default: null
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
readonly: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
stars: {
|
stars: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 5
|
default: 5
|
||||||
|
@ -23,10 +32,14 @@ export default {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onStarClick(event, value) {
|
onStarClick(event, value) {
|
||||||
this.updateModel(event, value);
|
if (!this.readonly && !this.disabled) {
|
||||||
|
this.updateModel(event, value);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
onCancelClick() {
|
onCancelClick() {
|
||||||
this.updateModel(event, null);
|
if (!this.readonly && !this.disabled) {
|
||||||
|
this.updateModel(event, null);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
updateModel(event, value) {
|
updateModel(event, value) {
|
||||||
this.$emit('input', value);
|
this.$emit('input', value);
|
||||||
|
|
|
@ -25,9 +25,18 @@ export default {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'horizontal'
|
default: 'horizontal'
|
||||||
},
|
},
|
||||||
step: Number,
|
step: {
|
||||||
range: Boolean,
|
type: Number,
|
||||||
disabled: Boolean
|
default: null
|
||||||
|
},
|
||||||
|
range: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
},
|
},
|
||||||
dragging: false,
|
dragging: false,
|
||||||
handleIndex: null,
|
handleIndex: null,
|
||||||
|
|
|
@ -14,49 +14,48 @@ import Password from 'primevue/password';
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Properties</h3>
|
<h3>Properties</h3>
|
||||||
<p>Password accepts all valid properties of an input element in addition the the custom properties below.</p>
|
<p>Any valid attribute 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">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Type</th>
|
<th>Type</th>
|
||||||
<th>Default</th>
|
<th>Default</th>
|
||||||
<th>Description</th>
|
<th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>promptLabel</td>
|
<td>promptLabel</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>Enter a password</td>
|
<td>Enter a password</td>
|
||||||
<td>Text to prompt password entry.</td>
|
<td>Text to prompt password entry.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>weakLabel</td>
|
<td>weakLabel</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>Weak</td>
|
<td>Weak</td>
|
||||||
<td>Text for a weak password.</td>
|
<td>Text for a weak password.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>mediumLabel</td>
|
<td>mediumLabel</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>Medium</td>
|
<td>Medium</td>
|
||||||
<td>Text for a medium password.</td>
|
<td>Text for a medium password.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>strongLabel</td>
|
<td>strongLabel</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>Strong</td>
|
<td>Strong</td>
|
||||||
<td>Text for a strong password.</td>
|
<td>Text for a strong password.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>feedback</td>
|
<td>feedback</td>
|
||||||
<td>boolean</td>
|
<td>boolean</td>
|
||||||
<td>true</td>
|
<td>true</td>
|
||||||
<td>Whether to show the strength indicator or not.</td>
|
<td>Whether to show the strength indicator or not.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
@ -66,10 +65,10 @@ import Password from 'primevue/password';
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Element</th>
|
<th>Element</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
|
|
|
@ -26,47 +26,48 @@ import Rating from 'primevue/rating';
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Properties</h3>
|
<h3>Properties</h3>
|
||||||
|
<p>Any attribute such 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">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Type</th>
|
<th>Type</th>
|
||||||
<th>Default</th>
|
<th>Default</th>
|
||||||
<th>Description</th>
|
<th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>value</td>
|
<td>value</td>
|
||||||
<td>number</td>
|
<td>number</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Value of the rating.</td>
|
<td>Value of the rating.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>disabled</td>
|
<td>disabled</td>
|
||||||
<td>boolean</td>
|
<td>boolean</td>
|
||||||
<td>false</td>
|
<td>false</td>
|
||||||
<td>When present, it specifies that the element should be disabled.</td>
|
<td>When present, it specifies that the element should be disabled.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>readonly</td>
|
<td>readonly</td>
|
||||||
<td>boolean</td>
|
<td>boolean</td>
|
||||||
<td>false</td>
|
<td>false</td>
|
||||||
<td>When present, changing the value is not possible.</td>
|
<td>When present, it specifies that component is read-only.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>stars</td>
|
<td>stars</td>
|
||||||
<td>number</td>
|
<td>number</td>
|
||||||
<td>5</td>
|
<td>5</td>
|
||||||
<td>Number of stars.</td>
|
<td>Number of stars.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>cancel</td>
|
<td>cancel</td>
|
||||||
<td>boolean</td>
|
<td>boolean</td>
|
||||||
<td>true</td>
|
<td>true</td>
|
||||||
<td>When specified a cancel icon is displayed to allow removing the value.</td>
|
<td>When specified a cancel icon is displayed to allow clearing the value.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
@ -75,26 +76,24 @@ import Rating from 'primevue/rating';
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Parameters</th>
|
<th>Parameters</th>
|
||||||
<th>Description</th>
|
<th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>change</td>
|
<td>change</td>
|
||||||
<td>event.originalEvent: Browser event <br />
|
<td>event.originalEvent: Original event <br />
|
||||||
event.value: selected value
|
event.value: Selected option value </td>
|
||||||
</td>
|
<td>Callback to invoke on value change.</td>
|
||||||
<td>Callback to invoke on value change.</td>
|
</tr>
|
||||||
</tr>
|
<tr>
|
||||||
<tr>
|
<td>input</td>
|
||||||
<td>input</td>
|
<td>value: New value</td>
|
||||||
<td>event: selected value
|
<td>Callback to invoke on value change.</td>
|
||||||
</td>
|
</tr>
|
||||||
<td>Callback to invoke on value change.</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
@ -104,28 +103,28 @@ import Rating from 'primevue/rating';
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Element</th>
|
<th>Element</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-rating</td>
|
<td>p-rating</td>
|
||||||
<td>Container element</td>
|
<td>Container element</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-rating-star</td>
|
<td>p-rating-star</td>
|
||||||
<td>Star element</td>
|
<td>Star element</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-rating-star-on</td>
|
<td>p-rating-star-on</td>
|
||||||
<td>Selected star element.</td>
|
<td>Selected star element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-rating-cancel</td>
|
<td>p-rating-cancel</td>
|
||||||
<td>Cancel icon.</td>
|
<td>Cancel icon.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -37,7 +37,7 @@ export default {
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Step</h3>
|
<h3>Step</h3>
|
||||||
<p>Step factor is 1 by default and can be customized with step option.</p>
|
<p>Step factor is 1 by default and can be customized with <i>step</i> option.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Slider v-model="value" :step="20" />
|
<Slider v-model="value" :step="20" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
@ -49,59 +49,60 @@ export default {
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Properties</h3>
|
<h3>Properties</h3>
|
||||||
|
<p>Any attribute such 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">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Type</th>
|
<th>Type</th>
|
||||||
<th>Default</th>
|
<th>Default</th>
|
||||||
<th>Description</th>
|
<th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>value</td>
|
<td>value</td>
|
||||||
<td>number</td>
|
<td>number</td>
|
||||||
<td>0</td>
|
<td>0</td>
|
||||||
<td>Value of the component.</td>
|
<td>Value of the component.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>min</td>
|
<td>min</td>
|
||||||
<td>number</td>
|
<td>number</td>
|
||||||
<td>0</td>
|
<td>0</td>
|
||||||
<td>Mininum boundary value.</td>
|
<td>Mininum boundary value.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>max</td>
|
<td>max</td>
|
||||||
<td>number</td>
|
<td>number</td>
|
||||||
<td>100</td>
|
<td>100</td>
|
||||||
<td>Maximum boundary value.</td>
|
<td>Maximum boundary value.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>orientation</td>
|
<td>orientation</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>horizontal</td>
|
<td>horizontal</td>
|
||||||
<td>Orientation of the slider, valid values are horizontal and vertical.</td>
|
<td>Orientation of the slider, valid values are horizontal and vertical.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>step</td>
|
<td>step</td>
|
||||||
<td>number</td>
|
<td>number</td>
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
<td>Step factor to increment/decrement the value.</td>
|
<td>Step factor to increment/decrement the value.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>range</td>
|
<td>range</td>
|
||||||
<td>boolean</td>
|
<td>boolean</td>
|
||||||
<td>false</td>
|
<td>false</td>
|
||||||
<td>When speficed, allows two boundary values to be picked.</td>
|
<td>When speficed, allows two boundary values to be picked.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>disabled</td>
|
<td>disabled</td>
|
||||||
<td>boolean</td>
|
<td>boolean</td>
|
||||||
<td>false</td>
|
<td>false</td>
|
||||||
<td>When present, it specifies that the component should be disabled.</td>
|
<td>When present, it specifies that the component should be disabled.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
@ -110,30 +111,31 @@ export default {
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Parameters</th>
|
<th>Parameters</th>
|
||||||
<th>Description</th>
|
<th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>change</td>
|
<td>change</td>
|
||||||
<td>event: New value.</td>
|
<td>event.originalEvent: Original event <br />
|
||||||
<td>Callback to invoke on value change via slide.</td>
|
event.value: Selected option value </td>
|
||||||
</tr>
|
<td>Callback to invoke on value change.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>input</td>
|
<tr>
|
||||||
<td>event: New value.</td>
|
<td>input</td>
|
||||||
<td>Callback to invoke on value change via slide.</td>
|
<td>value: New value</td>
|
||||||
</tr>
|
<td>Callback to invoke on value change.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>slideEnd</td>
|
<tr>
|
||||||
<td>event.originalEvent: Slide event <br />
|
<td>slideEnd</td>
|
||||||
event.value: New value.
|
<td>event.originalEvent: Slide event <br />
|
||||||
</td>
|
event.value: New value.
|
||||||
<td>Callback to invoke when slide ends.</td>
|
</td>
|
||||||
</tr>
|
<td>Callback to invoke when slide ends.</td>
|
||||||
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
@ -143,20 +145,20 @@ export default {
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Element</th>
|
<th>Element</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-slider</td>
|
<td>p-slider</td>
|
||||||
<td>Container element</td>
|
<td>Container element</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-slider-handle</td>
|
<td>p-slider-handle</td>
|
||||||
<td>Handle element.</td>
|
<td>Handle element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -20,30 +20,30 @@ import Textarea from 'primevue/textarea';
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Properties</h3>
|
<h3>Properties</h3>
|
||||||
<p>InputTextarea passes any attribute to the underlying textarea element, additional attributes are as follows;</p>
|
<p>InputTextarea passes any attribute to the underlying textarea element, additional attributes are the following.</p>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Type</th>
|
<th>Type</th>
|
||||||
<th>Default</th>
|
<th>Default</th>
|
||||||
<th>Description</th>
|
<th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>value</td>
|
<td>value</td>
|
||||||
<td>any</td>
|
<td>any</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Value of the component.</td>
|
<td>Value of the component.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>autoResize</td>
|
<td>autoResize</td>
|
||||||
<td>boolean</td>
|
<td>boolean</td>
|
||||||
<td>false</td>
|
<td>false</td>
|
||||||
<td>When present, height of textarea changes as being typed.</td>
|
<td>When present, height of textarea changes as being typed.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
@ -52,18 +52,18 @@ import Textarea from 'primevue/textarea';
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Parameters</th>
|
<th>Parameters</th>
|
||||||
<th>Description</th>
|
<th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>input</td>
|
<td>input</td>
|
||||||
<td>event: New value</td>
|
<td>event: New value</td>
|
||||||
<td>Callback to invoke on value change.</td>
|
<td>Callback to invoke on value change.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
@ -73,16 +73,16 @@ import Textarea from 'primevue/textarea';
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Element</th>
|
<th>Element</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-inputtextarea</td>
|
<td>p-inputtextarea</td>
|
||||||
<td>Textarea element</td>
|
<td>Textarea element</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue