From 624b67350d264422d1b9614bac9b7b6cd67a4471 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Wed, 22 May 2019 18:31:12 +0300
Subject: [PATCH] Doc update

---
 src/components/rating/Rating.vue   |  23 +++-
 src/components/slider/Slider.vue   |  15 ++-
 src/views/password/PasswordDoc.vue |  83 +++++++-------
 src/views/rating/RatingDoc.vue     | 147 +++++++++++++------------
 src/views/slider/SliderDoc.vue     | 168 +++++++++++++++--------------
 src/views/textarea/TextareaDoc.vue |  74 ++++++-------
 6 files changed, 266 insertions(+), 244 deletions(-)

diff --git a/src/components/rating/Rating.vue b/src/components/rating/Rating.vue
index 77dd2cf59..3f45751c7 100644
--- a/src/components/rating/Rating.vue
+++ b/src/components/rating/Rating.vue
@@ -9,9 +9,18 @@
 <script>
 export default {
     props: {
-        value: Number,
-		disabled: Boolean,
-		readonly: Boolean,
+        value: {
+            type: Number,
+            default: null
+        },
+		disabled: {
+            type: Boolean,
+            default: false
+        },
+		readonly: {
+            type: Boolean,
+            default: false
+        },
         stars: {
             type: Number,
             default: 5
@@ -23,10 +32,14 @@ export default {
     },
     methods: {
         onStarClick(event, value) {
-            this.updateModel(event, value);
+            if (!this.readonly && !this.disabled) {
+                this.updateModel(event, value);
+            }
         },
         onCancelClick() {
-            this.updateModel(event, null);
+            if (!this.readonly && !this.disabled) {
+                this.updateModel(event, null);
+            }
         },
         updateModel(event, value) {
             this.$emit('input', value);
diff --git a/src/components/slider/Slider.vue b/src/components/slider/Slider.vue
index bcfd77187..7a20eec16 100644
--- a/src/components/slider/Slider.vue
+++ b/src/components/slider/Slider.vue
@@ -25,9 +25,18 @@ export default {
 			type: String,
 			default: 'horizontal'
 		},
-		step: Number,
-		range: Boolean,
-        disabled: Boolean
+		step: {
+			type: Number,
+			default: null
+		},
+		range: {
+			type: Boolean,
+			default: false
+		},
+        disabled: {
+			type: Boolean,
+			default: false
+		}
     },
     dragging: false,
     handleIndex: null,
diff --git a/src/views/password/PasswordDoc.vue b/src/views/password/PasswordDoc.vue
index 906dead15..4623f1c86 100644
--- a/src/views/password/PasswordDoc.vue
+++ b/src/views/password/PasswordDoc.vue
@@ -14,49 +14,48 @@ import Password from 'primevue/password';
 </CodeHighlight>
 
 				<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">
 					<table class="doc-table">
 						<thead>
-						<tr>
-							<th>Name</th>
-							<th>Type</th>
-							<th>Default</th>
-							<th>Description</th>
-						</tr>
+                            <tr>
+                                <th>Name</th>
+                                <th>Type</th>
+                                <th>Default</th>
+                                <th>Description</th>
+                            </tr>
 						</thead>
 						<tbody>
-						<tr>
-							<td>promptLabel</td>
-							<td>string</td>
-							<td>Enter a password</td>
-							<td>Text to prompt password entry.</td>
-						</tr>
-						<tr>
-							<td>weakLabel</td>
-							<td>string</td>
-							<td>Weak</td>
-							<td>Text for a weak password.</td>
-						</tr>
-						<tr>
-							<td>mediumLabel</td>
-							<td>string</td>
-							<td>Medium</td>
-							<td>Text for a medium password.</td>
-						</tr>
-						<tr>
-							<td>strongLabel</td>
-							<td>string</td>
-							<td>Strong</td>
-							<td>Text for a strong password.</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>promptLabel</td>
+                                <td>string</td>
+                                <td>Enter a password</td>
+                                <td>Text to prompt password entry.</td>
+                            </tr>
+                            <tr>
+                                <td>weakLabel</td>
+                                <td>string</td>
+                                <td>Weak</td>
+                                <td>Text for a weak password.</td>
+                            </tr>
+                            <tr>
+                                <td>mediumLabel</td>
+                                <td>string</td>
+                                <td>Medium</td>
+                                <td>Text for a medium password.</td>
+                            </tr>
+                            <tr>
+                                <td>strongLabel</td>
+                                <td>string</td>
+                                <td>Strong</td>
+                                <td>Text for a strong password.</td>
+                            </tr>
+                            <tr>
+                                <td>feedback</td>
+                                <td>boolean</td>
+                                <td>true</td>
+                                <td>Whether to show the strength indicator or not.</td>
+                            </tr>
 						</tbody>
 					</table>
 				</div>
@@ -66,10 +65,10 @@ import Password from 'primevue/password';
 				<div class="doc-tablewrapper">
 					<table class="doc-table">
 						<thead>
-						<tr>
-							<th>Name</th>
-							<th>Element</th>
-						</tr>
+                            <tr>
+                                <th>Name</th>
+                                <th>Element</th>
+                            </tr>
 						</thead>
 						<tbody>
 							<tr>
diff --git a/src/views/rating/RatingDoc.vue b/src/views/rating/RatingDoc.vue
index a2c1e476f..dddac60dd 100644
--- a/src/views/rating/RatingDoc.vue
+++ b/src/views/rating/RatingDoc.vue
@@ -26,47 +26,48 @@ import Rating from 'primevue/rating';
 </CodeHighlight>
 
 				<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">
 					<table class="doc-table">
 						<thead>
-						<tr>
-							<th>Name</th>
-							<th>Type</th>
-							<th>Default</th>
-							<th>Description</th>
-						</tr>
+                            <tr>
+                                <th>Name</th>
+                                <th>Type</th>
+                                <th>Default</th>
+                                <th>Description</th>
+                            </tr>
 						</thead>
 						<tbody>
-						<tr>
-							<td>value</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, changing the value is not possible.</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 removing the value.</td>
-						</tr>
+                            <tr>
+                                <td>value</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>
@@ -75,26 +76,24 @@ import Rating from 'primevue/rating';
 				<div class="doc-tablewrapper">
 					<table class="doc-table">
 						<thead>
-						<tr>
-							<th>Name</th>
-							<th>Parameters</th>
-							<th>Description</th>
-						</tr>
+                            <tr>
+                                <th>Name</th>
+                                <th>Parameters</th>
+                                <th>Description</th>
+                            </tr>
 						</thead>
 						<tbody>
-						<tr>
-							<td>change</td>
-							<td>event.originalEvent: Browser event <br />
-								event.value: selected value
-							</td>
-							<td>Callback to invoke on value change.</td>
-						</tr>
-						<tr>
-							<td>input</td>
-							<td>event: selected value
-							</td>
-							<td>Callback to invoke on value change.</td>
-						</tr>
+						    <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>input</td>
+                                <td>value: New value</td>
+                                <td>Callback to invoke on value change.</td>
+                            </tr>
 						</tbody>
 					</table>
 				</div>
@@ -104,28 +103,28 @@ import Rating from 'primevue/rating';
 				<div class="doc-tablewrapper">
 					<table class="doc-table">
 						<thead>
-						<tr>
-							<th>Name</th>
-							<th>Element</th>
-						</tr>
+                            <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>
+                            <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>
diff --git a/src/views/slider/SliderDoc.vue b/src/views/slider/SliderDoc.vue
index 436cc6c6b..d9c19e871 100644
--- a/src/views/slider/SliderDoc.vue
+++ b/src/views/slider/SliderDoc.vue
@@ -37,7 +37,7 @@ export default {
 </CodeHighlight>
 
 				<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>
 &lt;Slider v-model=&quot;value&quot; :step=&quot;20&quot; /&gt;
 </CodeHighlight>
@@ -49,59 +49,60 @@ export default {
 </CodeHighlight>
 
 				<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">
 					<table class="doc-table">
 						<thead>
-						<tr>
-							<th>Name</th>
-							<th>Type</th>
-							<th>Default</th>
-							<th>Description</th>
-						</tr>
+                            <tr>
+                                <th>Name</th>
+                                <th>Type</th>
+                                <th>Default</th>
+                                <th>Description</th>
+                            </tr>
 						</thead>
 						<tbody>
-						<tr>
-							<td>value</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>value</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>
 						</tbody>
 					</table>
 				</div>
@@ -110,30 +111,31 @@ export default {
 				<div class="doc-tablewrapper">
 					<table class="doc-table">
 						<thead>
-						<tr>
-							<th>Name</th>
-							<th>Parameters</th>
-							<th>Description</th>
-						</tr>
+                            <tr>
+                                <th>Name</th>
+                                <th>Parameters</th>
+                                <th>Description</th>
+                            </tr>
 						</thead>
 						<tbody>
-						<tr>
-							<td>change</td>
-							<td>event: New value.</td>
-							<td>Callback to invoke on value change via slide.</td>
-						</tr>
-						<tr>
-							<td>input</td>
-							<td>event: New value.</td>
-							<td>Callback to invoke on value change via slide.</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>
+                            <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>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 />
+                                    event.value: New value.
+                                </td>
+                                <td>Callback to invoke when slide ends.</td>
+                            </tr>
 						</tbody>
 					</table>
 				</div>
@@ -143,20 +145,20 @@ export default {
 				<div class="doc-tablewrapper">
 					<table class="doc-table">
 						<thead>
-						<tr>
-							<th>Name</th>
-							<th>Element</th>
-						</tr>
+                            <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>
+                            <tr>
+                                <td>p-slider</td>
+                                <td>Container element</td>
+                            </tr>
+                            <tr>
+                                <td>p-slider-handle</td>
+                                <td>Handle element.</td>
+                            </tr>
 						</tbody>
 					</table>
 				</div>
diff --git a/src/views/textarea/TextareaDoc.vue b/src/views/textarea/TextareaDoc.vue
index 235151530..b05e49418 100644
--- a/src/views/textarea/TextareaDoc.vue
+++ b/src/views/textarea/TextareaDoc.vue
@@ -20,30 +20,30 @@ import Textarea from 'primevue/textarea';
 </CodeHighlight>
 
 				<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">
 					<table class="doc-table">
 						<thead>
-						<tr>
-							<th>Name</th>
-							<th>Type</th>
-							<th>Default</th>
-							<th>Description</th>
-						</tr>
+                            <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 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>
+                            <tr>
+                                <td>value</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>
@@ -52,18 +52,18 @@ import Textarea from 'primevue/textarea';
 				<div class="doc-tablewrapper">
 					<table class="doc-table">
 						<thead>
-						<tr>
-							<th>Name</th>
-							<th>Parameters</th>
-							<th>Description</th>
-						</tr>
+                            <tr>
+                                <th>Name</th>
+                                <th>Parameters</th>
+                                <th>Description</th>
+                            </tr>
 						</thead>
 						<tbody>
-						<tr>
-							<td>input</td>
-							<td>event: New value</td>
-							<td>Callback to invoke on value change.</td>
-						</tr>
+                            <tr>
+                                <td>input</td>
+                                <td>event: New value</td>
+                                <td>Callback to invoke on value change.</td>
+                            </tr>
 						</tbody>
 					</table>
 				</div>
@@ -73,16 +73,16 @@ import Textarea from 'primevue/textarea';
 				<div class="doc-tablewrapper">
 					<table class="doc-table">
 						<thead>
-						<tr>
-							<th>Name</th>
-							<th>Element</th>
-						</tr>
+                            <tr>
+                                <th>Name</th>
+                                <th>Element</th>
+                            </tr>
 						</thead>
 						<tbody>
-						<tr>
-							<td>p-inputtextarea</td>
-							<td>Textarea element</td>
-						</tr>
+                            <tr>
+                                <td>p-inputtextarea</td>
+                                <td>Textarea element</td>
+                            </tr>
 						</tbody>
 					</table>
 				</div>