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

Merge branch 'master' of https://github.com/primefaces/primevue

pull/1021/head
Cagatay Civici 2021-02-22 22:47:50 +03:00
parent 1ed691b491 5c74151cbc
commit 81b9576073
6 changed files with 12 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -507,7 +507,7 @@ export default {
<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)" field="label" optionGroupLabel="label" optionGroupChildren="items"> <AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)" field="label" optionGroupLabel="label" optionGroupChildren="items">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="p-d-flex p-ai-center country-item"> <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>{{slotProps.item.label}}</div>
</div> </div>
</template> </template>
@ -517,7 +517,7 @@ export default {
<AutoComplete v-model="selectedCountry2" :suggestions="filteredCountries" @complete="searchCountry($event)" :dropdown="true" field="name" forceSelection> <AutoComplete v-model="selectedCountry2" :suggestions="filteredCountries" @complete="searchCountry($event)" :dropdown="true" field="name" forceSelection>
<template #item="slotProps"> <template #item="slotProps">
<div class="country-item"> <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>{{slotProps.item.name}}</div>
</div> </div>
</template> </template>
@ -533,7 +533,7 @@ export default {
</template> </template>
<script> <script>
import CountryService from '../../service/CountryService'; import CountryService from '../service/CountryService';
import {FilterService,FilterMatchMode} from 'primevue/api'; import {FilterService,FilterMatchMode} from 'primevue/api';
export default { export default {

6
src/views/dialog/DialogDoc.vue
View File

@ -65,12 +65,6 @@ export default {
<h5>Responsive</h5> <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 <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> 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> <pre v-code><code>
&lt;Dialog v-model:visible="display" :breakpoints="{'960px': '75vw', '640px': '100vw'}" :style="{width: '50vw'}"&gt; &lt;Dialog v-model:visible="display" :breakpoints="{'960px': '75vw', '640px': '100vw'}" :style="{width: '50vw'}"&gt;

7
src/views/dropdown/DropdownDoc.vue
View File

@ -590,18 +590,17 @@ export default {
<Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"> <Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="p-d-flex p-ai-center country-item"> <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>{{slotProps.option.label}}</div>
</div> </div>
</template> </template>
</Dropdown> </Dropdown>
{{selectedGroupedCity}}
<h5>Advanced with Templating, Filtering and Clear Icon</h5> <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"> <Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" :filter="true" placeholder="Select a Country" :showClear="true">
<template #value="slotProps"> <template #value="slotProps">
<div class="country-item country-item-value" v-if="slotProps.value"> <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>{{slotProps.value.name}}</div>
</div> </div>
<span v-else> <span v-else>
@ -610,7 +609,7 @@ export default {
</template> </template>
<template #option="slotProps"> <template #option="slotProps">
<div class="country-item"> <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>{{slotProps.option.name}}</div>
</div> </div>
</template> </template>

4
src/views/listbox/ListboxDoc.vue
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"> <Listbox v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" style="width:15rem" optionGroupLabel="label" optionGroupChildren="items" listStyle="max-height:250px">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="p-d-flex p-ai-center country-item"> <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>{{slotProps.option.label}}</div>
</div> </div>
</template> </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"> <Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width:15rem" filterPlaceholder="Search">
<template #option="slotProps"> <template #option="slotProps">
<div class="country-item"> <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>{{slotProps.option.name}}</div>
</div> </div>
</template> </template>

6
src/views/multiselect/MultiSelectDoc.vue
View File

@ -605,7 +605,7 @@ export default {
<MultiSelect v-model="selectedGroupedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select Cities"> <MultiSelect v-model="selectedGroupedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select Cities">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="p-d-flex p-ai-center country-item"> <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>{{slotProps.option.label}}</div>
</div> </div>
</template> </template>
@ -615,7 +615,7 @@ export default {
<MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" :filter="true" class="multiselect-custom"> <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" :filter="true" class="multiselect-custom">
<template #value="slotProps"> <template #value="slotProps">
<div class="country-item country-item-value" v-for="option of slotProps.value" :key="option.code"> <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>{{option.name}}</div>
</div> </div>
<template v-if="!slotProps.value || slotProps.value.length === 0"> <template v-if="!slotProps.value || slotProps.value.length === 0">
@ -624,7 +624,7 @@ export default {
</template> </template>
<template #option="slotProps"> <template #option="slotProps">
<div class="country-item"> <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>{{slotProps.option.name}}</div>
</div> </div>
</template> </template>

2
src/views/password/PasswordDoc.vue
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"> <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> <span>View on GitHub</span>
</a> </a>
<LiveEditor name="PasswordDemo" :sources="sources"/> <LiveEditor name="PasswordDemo" :sources="sources" :components="['Divider']"/>
</div> </div>
<pre v-code><code> <pre v-code><code>
<h5>Basic</h5> <h5>Basic</h5>