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

Doc refactor for AutoComplete, InputText and Calendar

pull/12/head
cagataycivici 2019-05-22 16:02:39 +03:00
parent a35f6fd139
commit 09d2b816cc
5 changed files with 156 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/autocomplete/AutoComplete.vue
View File

@ -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,
dropdown: Boolean,
suggestions: {
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,
disabled: Boolean,
field: String,
scrollHeight: {
type: String,
default: '200px'
multiple: {
type: Boolean,
default: false
},
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
}];
},

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

@ -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) {
return this.countries.filter((country) => {
return country.name.toLowerCase().startsWith(query.toLowerCase());
});
},
searchCountryBasic(event) {
setTimeout(() => {
this.filteredCountriesBasic = this.searchCountry(event.query);
}, 250);
searchCountry(event) {
this.filteredCountriesBasic = this.countryService.search(event.query);
}
}
}
@ -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>

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

@ -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>

4
src/views/inputtext/InputTextDemo.vue
View File

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

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

@ -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;label htmlFor=&quot;float-input&quot;&gt;Username&lt;/label&gt;
&lt;InputText id="username" type=&quot;text&quot; v-model=&quot;value&quot; /&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;label htmlFor=&quot;float-input&quot;&gt;Username&lt;/label&gt;
&lt;InputText id="username" type=&quot;text&quot; v-model=&quot;value2&quot; /&gt;
&lt;label for=&quot;username&quot;&gt;Username&lt;/label&gt;
&lt;/span&gt;
&lt;h3&gt;Disabled&lt;/h3&gt;