Merge branch 'master' of https://github.com/primefaces/primevue
commit
81b9576073
|
@ -507,7 +507,7 @@ export default {
|
|||
<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)" field="label" optionGroupLabel="label" optionGroupChildren="items">
|
||||
<template #optiongroup="slotProps">
|
||||
<div class="p-d-flex p-ai-center country-item">
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" width="18" />
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
|
||||
<div>{{slotProps.item.label}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -517,7 +517,7 @@ export default {
|
|||
<AutoComplete v-model="selectedCountry2" :suggestions="filteredCountries" @complete="searchCountry($event)" :dropdown="true" field="name" forceSelection>
|
||||
<template #item="slotProps">
|
||||
<div class="country-item">
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" />
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
|
||||
<div>{{slotProps.item.name}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -533,7 +533,7 @@ export default {
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import CountryService from '../../service/CountryService';
|
||||
import CountryService from '../service/CountryService';
|
||||
import {FilterService,FilterMatchMode} from 'primevue/api';
|
||||
|
||||
export default {
|
||||
|
|
|
@ -65,12 +65,6 @@ export default {
|
|||
<h5>Responsive</h5>
|
||||
<p>Dialog width can be adjusted per screen size with the <i>breakpoints</i> option. In example below, default width is set to 50vw and below 961px, width would be 75vw and finally below 641px width becomes
|
||||
100%. The value of <i>breakpoints</i> should be an object literal whose keys are the maximum screen sizes and values are the widths per screen.</p>
|
||||
<pre v-code><code>
|
||||
<Dialog position="top" v-model:visible="display">
|
||||
Content
|
||||
</Dialog>
|
||||
|
||||
</code></pre>
|
||||
|
||||
<pre v-code><code>
|
||||
<Dialog v-model:visible="display" :breakpoints="{'960px': '75vw', '640px': '100vw'}" :style="{width: '50vw'}">
|
||||
|
|
|
@ -590,18 +590,17 @@ export default {
|
|||
<Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
|
||||
<template #optiongroup="slotProps">
|
||||
<div class="p-d-flex p-ai-center country-item">
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
|
||||
<div>{{slotProps.option.label}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
{{selectedGroupedCity}}
|
||||
|
||||
<h5>Advanced with Templating, Filtering and Clear Icon</h5>
|
||||
<Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" :filter="true" placeholder="Select a Country" :showClear="true">
|
||||
<template #value="slotProps">
|
||||
<div class="country-item country-item-value" v-if="slotProps.value">
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.value.code.toLowerCase()" />
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
|
||||
<div>{{slotProps.value.name}}</div>
|
||||
</div>
|
||||
<span v-else>
|
||||
|
@ -610,7 +609,7 @@ export default {
|
|||
</template>
|
||||
<template #option="slotProps">
|
||||
<div class="country-item">
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
|
||||
<div>{{slotProps.option.name}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -464,7 +464,7 @@ export default {
|
|||
<Listbox v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" style="width:15rem" optionGroupLabel="label" optionGroupChildren="items" listStyle="max-height:250px">
|
||||
<template #optiongroup="slotProps">
|
||||
<div class="p-d-flex p-ai-center country-item">
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
|
||||
<div>{{slotProps.option.label}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -474,7 +474,7 @@ export default {
|
|||
<Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width:15rem" filterPlaceholder="Search">
|
||||
<template #option="slotProps">
|
||||
<div class="country-item">
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
|
||||
<div>{{slotProps.option.name}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -605,7 +605,7 @@ export default {
|
|||
<MultiSelect v-model="selectedGroupedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select Cities">
|
||||
<template #optiongroup="slotProps">
|
||||
<div class="p-d-flex p-ai-center country-item">
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
|
||||
<div>{{slotProps.option.label}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -615,7 +615,7 @@ export default {
|
|||
<MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" :filter="true" class="multiselect-custom">
|
||||
<template #value="slotProps">
|
||||
<div class="country-item country-item-value" v-for="option of slotProps.value" :key="option.code">
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + option.code.toLowerCase()" />
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
|
||||
<div>{{option.name}}</div>
|
||||
</div>
|
||||
<template v-if="!slotProps.value || slotProps.value.length === 0">
|
||||
|
@ -624,7 +624,7 @@ export default {
|
|||
</template>
|
||||
<template #option="slotProps">
|
||||
<div class="country-item">
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
|
||||
<div>{{slotProps.option.name}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -186,7 +186,7 @@ import Password from 'primevue/password';
|
|||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/password" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="PasswordDemo" :sources="sources"/>
|
||||
<LiveEditor name="PasswordDemo" :sources="sources" :components="['Divider']"/>
|
||||
</div>
|
||||
<pre v-code><code>
|
||||
<h5>Basic</h5>
|
||||
|
|
Loading…
Reference in New Issue