Doc refactor for AutoComplete, InputText and Calendar

src/components/autocomplete/AutoComplete.vue

@@ -7,11 +7,11 @@
                 <span class="p-autocomplete-token-label">{{getItemContent(item)}}</span>
             </li>
             <li class="p-autocomplete-input-token">
-                <input ref="input" type="text" autoComplete="off" :disabled="disabled" v-bind="$attrs" v-on="listeners">
+                <input ref="input" type="text" autoComplete="off" v-bind="$attrs" v-on="listeners">
             </li>
         </ul>
         <i class="p-autocomplete-loader pi pi-spinner pi-spin" v-show="searching"></i>
-        <Button ref="dropdownButton" type="button" icon="pi pi-fw pi-chevron-down" class="p-autocomplete-dropdown" :disabled="disabled" @click="onDropdownClick" v-if="dropdown"/>
+        <Button ref="dropdownButton" type="button" icon="pi pi-fw pi-chevron-down" class="p-autocomplete-dropdown" :disabled="$attrs.disabled" @click="onDropdownClick" v-if="dropdown"/>
         <transition name="p-input-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
             <div ref="overlay" class="p-autocomplete-panel" :style="{'max-height': scrollHeight}" v-if="overlayVisible">
                 <ul class="p-autocomplete-items p-autocomplete-list p-component">
@@ -35,18 +35,29 @@ export default {
     inheritAttrs: false,
     props: {
         value: null,
-        suggestions: Array,
+        suggestions: {
-        dropdown: Boolean,
+            type: Array,
+            default: null
+        },
+        field: {
+            type: String,
+            default: null
+        },
+        scrollHeight: {
+            type: String,
+            default: '200px'
+        },
+        dropdown: {
+            type: Boolean,
+            default: false
+        },
         dropdownMode: {
             type: String,
             default: 'blank'
         },
-        multiple: Boolean,
+        multiple: {
-        disabled: Boolean,
+            type: Boolean,
-        field: String,
+            default: false
-        scrollHeight: {
-            type: String,
-            default: '200px'
         },
         minLength: {
             type: Number,
@@ -55,7 +66,7 @@ export default {
         delay: {
             type: Number,
             default: 300
-        },
+        }
     },
     timeout: null,
     outsideClickListener: null,
@@ -353,12 +364,12 @@ export default {
         inputClass() {
             return ['p-autocomplete-input p-inputtext p-component', {
                 'p-autocomplete-dd-input': this.dropdown, 
-                'p-disabled': this.disabled
+                'p-disabled': this.$attrs.disabled
             }];
         },
         multiContainerClass() {
             return ['p-autocomplete-multiple-container p-component p-inputtext', {
-                'p-disabled': this.disabled,
+                'p-disabled': this.$attrs.disabled,
                 'p-focus': this.focused
             }];
         },

src/views/autocomplete/AutoCompleteDoc.vue

@@ -9,35 +9,25 @@ import AutoComplete from 'primevue/autocomplete';
 
 				<h3>Getting Started</h3>
 				<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.</p>
+					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>
 <CodeHighlight>
-&lt;AutoComplete v-model=&quot;selectedCountry&quot; :suggestions=&quot;filteredCountriesBasic&quot; @complete=&quot;searchCountryBasic($event)&quot; field=&quot;name&quot; /&gt;
+&lt;AutoComplete v-model=&quot;selectedCountry&quot; :suggestions=&quot;filteredCountriesBasic&quot; @complete=&quot;searchCountry($event)&quot; field=&quot;name&quot; /&gt;
 </CodeHighlight>
 <CodeHighlight lang="js">
 export default {
 	data() {
 		return {
 			selectedCountry: null,
-			filteredCountriesBasic: null
+			filteredCountries: null
 		}
 	},
 	countryService: null,
 	created() {
 		this.countryService = new CountryService();
 	},
-	mounted() {
-		this.countryService.getCountries().then(data => this.countries = data);
-	},
 	methods: {
-		searchCountry(query) {
+		searchCountry(event) {
-			return this.countries.filter((country) => {
+            this.filteredCountriesBasic = this.countryService.search(event.query);
-				return country.name.toLowerCase().startsWith(query.toLowerCase());
-			});
-		},
-		searchCountryBasic(event) {
-			setTimeout(() => {
-				this.filteredCountriesBasic = this.searchCountry(event.query);
-			}, 250);
 		}
 	}
 }
@@ -53,7 +43,7 @@ export default {
 </CodeHighlight>
 
 				<h3>Multiple Mode</h3>
-				<p>Multiple mode is enabled using <i>multiple</i> property used to select more than one value from the autocomplete. In this case, value reference should be an array.</p>
+				<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>
 <CodeHighlight>
 &lt;AutoComplete :multiple=&quot;true&quot; v-model=&quot;selectedCountries&quot; :suggestions=&quot;filteredCountriesMultiple&quot; @complete=&quot;searchCountryMultiple($event)&quot; field=&quot;name&quot; /&gt;
 </CodeHighlight>
@@ -67,21 +57,20 @@ export default {
 </CodeHighlight>
 
 				<h3>Templating</h3>
-				<p>Item template allows displaying custom content inside the suggestions panel. The local template variable passed to the template is an object in the suggestions array.</p>
+				<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.</p>
 <CodeHighlight>
 <template v-pre>
 &lt;AutoComplete v-model=&quot;brand&quot; :suggestions=&quot;filteredBrands&quot; @complete=&quot;searchBrand($event)&quot; placeholder=&quot;Hint: type 'v' or 'f'&quot; :dropdown=&quot;true&quot;&gt;
 	&lt;template #item=&quot;slotProps&quot;&gt;
-		&lt;div class=&quot;p-clearfix p-autocomplete-brand-item&quot;&gt;
 		&lt;img :alt=&quot;slotProps.item&quot; :src=&quot;'/demo/images/car/' + slotProps.item + '.png'&quot; /&gt;
         &lt;div&gt;{{slotProps.item}}&lt;/div&gt;
-		&lt;/div&gt;
 	&lt;/template&gt;
 &lt;/AutoComplete&gt;
 </template>
 </CodeHighlight>
 
 				<h3>Properties</h3>
+                <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>
@@ -147,17 +136,12 @@ export default {
                                 <td>300</td>
                                 <td>Delay between keystrokes to wait before sending a query.</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>
 
 				<h3>Events</h3>
+                <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>

src/views/calendar/CalendarDoc.vue

@@ -167,7 +167,7 @@ export default {
 </CodeHighlight>
 
                 <h3>Properties</h3>
-                <p>Calendar passes any valid attribute such as name and placeholder to the underlying input text element. Following are the additional properties to configure the calendar.</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>
@@ -406,7 +406,7 @@ export default {
                 </div>
 
                 <h3>Events</h3>
-                <p>Calendar passes any valid event such as focus, blur and input to the underlying input text element. Following are the additional event to configure the calendar.</p>
+                <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>

src/views/inputtext/InputTextDemo.vue

@@ -14,8 +14,8 @@
 
             <h3>Floating Label</h3>
             <span class="p-float-label">
-                <InputText type="text" v-model="value2" />
+                <InputText id="username" type="text" v-model="value2" />
-                <label htmlFor="float-input">Username</label>
+                <label for="username">Username</label>
             </span>
 
             <h3>Disabled</h3>

src/views/inputtext/InputTextDoc.vue

@@ -17,8 +17,8 @@ import InputText from 'primevue/inputtext';
 				<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>
 <CodeHighlight>
 &lt;span class=&quot;p-float-label&quot;&gt;
-	&lt;InputText type=&quot;text&quot; v-model=&quot;value&quot; /&gt;
+	&lt;InputText id="username" type=&quot;text&quot; v-model=&quot;value&quot; /&gt;
-	&lt;label htmlFor=&quot;float-input&quot;&gt;Username&lt;/label&gt;
+	&lt;label for=&quot;username&quot;&gt;Username&lt;/label&gt;
 &lt;/span&gt;
 </CodeHighlight>
 
@@ -70,8 +70,8 @@ import InputText from 'primevue/inputtext';
 
 			&lt;h3&gt;Floating Label&lt;/h3&gt;
 			&lt;span class=&quot;p-float-label&quot;&gt;
-				&lt;InputText type=&quot;text&quot; v-model=&quot;value2&quot; /&gt;
+				&lt;InputText id="username" type=&quot;text&quot; v-model=&quot;value2&quot; /&gt;
-				&lt;label htmlFor=&quot;float-input&quot;&gt;Username&lt;/label&gt;
+				&lt;label for=&quot;username&quot;&gt;Username&lt;/label&gt;
 			&lt;/span&gt;
 
 			&lt;h3&gt;Disabled&lt;/h3&gt;