pull/1021/head
Cagatay Civici 2021-02-22 22:47:50 +03:00
commit 81b9576073
6 changed files with 12 additions and 19 deletions

View File

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

View File

@ -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>
&lt;Dialog position="top" v-model:visible="display"&gt;
Content
&lt;/Dialog&gt;
</code></pre>
<pre v-code><code>
&lt;Dialog v-model:visible="display" :breakpoints="{'960px': '75vw', '640px': '100vw'}" :style="{width: '50vw'}"&gt;

View File

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

View File

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

View File

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

View File

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