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

Updating demos with new content

pull/358/head
cagataycivici 2020-07-01 15:21:42 +03:00
parent a8e1ab6677
commit 5400fe9ecc
10 changed files with 138 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/demo/data/countries.json
View File

@ -1,7 +1,6 @@
{ {
"data": [ "data": [
{"name": "Afghanistan", "code": "AF"}, {"name": "Afghanistan", "code": "AF"},
{"name": "Åland Islands", "code": "AX"},
{"name": "Albania", "code": "AL"}, {"name": "Albania", "code": "AL"},
{"name": "Algeria", "code": "DZ"}, {"name": "Algeria", "code": "DZ"},
{"name": "American Samoa", "code": "AS"}, {"name": "American Samoa", "code": "AS"},

10
public/demo/images/product/product-placeholder.svg Normal file
View File

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="300px" height="200px" viewBox="0 0 300 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Artboard</title>
<g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" fill="#F8F9FA" x="0" y="0" width="300" height="200"></rect>
<g id="image" transform="translate(110.000000, 70.000000)" fill="#BABABC" fill-rule="nonzero">
<path d="M75,0 L5,0 C2.23857625,0 0,2.23857625 0,5 L0,55 C0,57.7614237 2.23857625,60 5,60 L75,60 C77.7614237,60 80,57.7614237 80,55 L80,5 C80,2.23857625 77.7614237,0 75,0 Z M20,10 C25.5228475,10 30,14.4771525 30,20 C30,25.5228475 25.5228475,30 20,30 C14.4771525,30 10,25.5228475 10,20 C10,14.4771525 14.4771525,10 20,10 Z M70,40 L70,50 L10,50 L10,40 L18.55,35.7 C19.4648753,35.2524957 20.5351247,35.2524957 21.45,35.7 L30,40 L53.65,21.1 C54.4866298,20.4991452 55.6133702,20.4991452 56.45,21.1 L70,30 L70,40 Z" id="Shape"></path>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

10
src/assets/styles/app/_demo.scss
View File

@ -111,4 +111,14 @@
.p-column-filter { .p-column-filter {
width: 100%; width: 100%;
}
.country-item {
display: flex;
align-items: center;
img.flag {
width: 28px;
margin-right: .5rem;
}
} }

15
src/views/autocomplete/AutoCompleteDemo.vue
View File

@ -16,7 +16,7 @@
<AutoComplete v-model="selectedCountry2" :suggestions="filteredCountries" @complete="searchCountry($event)" :dropdown="true" field="name"> <AutoComplete v-model="selectedCountry2" :suggestions="filteredCountries" @complete="searchCountry($event)" :dropdown="true" field="name">
<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()" class="p-mr-2" /> <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" />
<div>{{slotProps.item.name}}</div> <div>{{slotProps.item.name}}</div>
</div> </div>
</template> </template>
@ -72,15 +72,4 @@ export default {
'AutoCompleteDoc': AutoCompleteDoc 'AutoCompleteDoc': AutoCompleteDoc
} }
} }
</script> </script>
<style lang="scss">
.country-item {
display: flex;
align-items: center;
img {
width: 28px;
}
}
</style>

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

@ -260,7 +260,7 @@ export default {
&lt;AutoComplete v-model="selectedCountry2" :suggestions="filteredCountries" @complete="searchCountry($event)" :dropdown="true" field="name"&gt; &lt;AutoComplete v-model="selectedCountry2" :suggestions="filteredCountries" @complete="searchCountry($event)" :dropdown="true" field="name"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;div class="country-item"&gt; &lt;div class="country-item"&gt;
&lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" class="p-mr-2" /&gt; &lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" /&gt;
&lt;div&gt;{{slotProps.item.name}}&lt;/div&gt; &lt;div&gt;{{slotProps.item.name}}&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
@ -308,17 +308,6 @@ export default {
} }
} }
} }
</CodeHighlight>
<CodeHighlight lang="css">
.country-item {
display: flex;
align-items: center;
img {
width: 28px;
}
}
</CodeHighlight> </CodeHighlight>
</TabPanel> </TabPanel>
</TabView> </TabView>

2
src/views/datatable/DataTableCrudDemo.vue
View File

@ -313,6 +313,7 @@ export default {
} }
else { else {
this.product.id = this.createId(); this.product.id = this.createId();
this.product.image = 'product-placeholder.svg';
this.products.push(this.product); this.products.push(this.product);
this.$toast.add({severity:'success', summary: 'Product Created', life: 3000}); this.$toast.add({severity:'success', summary: 'Product Created', life: 3000});
} }
@ -421,6 +422,7 @@ export default {
} }
else { else {
this.product.id = this.createId(); this.product.id = this.createId();
this.product.image = 'product-placeholder.svg';
this.products.push(this.product); this.products.push(this.product);
this.$toast.add({severity:'success', summary: 'Product Created', life: 3000}); this.$toast.add({severity:'success', summary: 'Product Created', life: 3000});
} }

61
src/views/dropdown/DropdownDemo.vue
View File

@ -17,20 +17,20 @@
<Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/> <Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
<h5>Advanced with Templating, Filtering and Clear Icon</h5> <h5>Advanced with Templating, Filtering and Clear Icon</h5>
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" :filter="true" placeholder="Select a Car" :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="p-dropdown-car-value" v-if="slotProps.value"> <div class="country-item country-item-value" v-if="slotProps.value">
<img :alt="slotProps.value.brand" :src="'demo/images/car/' + slotProps.value.brand + '.png'" /> <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.value.code.toLowerCase()" />
<span>{{slotProps.value.brand}}</span> <div>{{slotProps.value.name}}</div>
</div> </div>
<span v-else> <span v-else>
{{slotProps.placeholder}} {{slotProps.placeholder}}
</span> </span>
</template> </template>
<template #option="slotProps"> <template #option="slotProps">
<div class="p-dropdown-car-option"> <div class="country-item">
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /> <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
<span>{{slotProps.option.brand}}</span> <div>{{slotProps.option.name}}</div>
</div> </div>
</template> </template>
</Dropdown> </Dropdown>
@ -49,7 +49,7 @@ export default {
return { return {
selectedCity1: null, selectedCity1: null,
selectedCity2: null, selectedCity2: null,
selectedCar: null, selectedCountry: null,
cities: [ cities: [
{name: 'New York', code: 'NY'}, {name: 'New York', code: 'NY'},
{name: 'Rome', code: 'RM'}, {name: 'Rome', code: 'RM'},
@ -57,16 +57,17 @@ export default {
{name: 'Istanbul', code: 'IST'}, {name: 'Istanbul', code: 'IST'},
{name: 'Paris', code: 'PRS'} {name: 'Paris', code: 'PRS'}
], ],
cars: [ countries: [
{brand: 'Audi', value: 'Audi'}, {name: 'Australia', code: 'AU'},
{brand: 'BMW', value: 'BMW'}, {name: 'Brazil', code: 'BR'},
{brand: 'Fiat', value: 'Fiat'}, {name: 'China', code: 'CN'},
{brand: 'Honda', value: 'Honda'}, {name: 'Egypt', code: 'EG'},
{brand: 'Jaguar', value: 'Jaguar'}, {name: 'France', code: 'FR'},
{brand: 'Mercedes', value: 'Mercedes'}, {name: 'Germany', code: 'DE'},
{brand: 'Renault', value: 'Renault'}, {name: 'India', code: 'IN'},
{brand: 'Volkswagen', value: 'Volkswagen'}, {name: 'Japan', code: 'JP'},
{brand: 'Volvo', value: 'Volvo'} {name: 'Spain', code: 'ES'},
{name: 'United States', code: 'US'}
] ]
} }
}, },
@ -78,29 +79,11 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.p-dropdown { .p-dropdown {
width: 12rem; width: 14rem;
} }
.p-dropdown-car-option, .country-item-value {
.p-dropdown-car-value { img.flag {
display: flex;
justify-content: space-between;
align-items: center;
img {
margin-right: .5rem;
width: 24px;
}
span {
line-height: 1;
}
}
.p-dropdown-car-value {
justify-content: flex-start;
img {
width: 17px; width: 17px;
} }
} }

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

@ -299,25 +299,27 @@ data() {
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;h3&gt;Basic&lt;/h3&gt; &lt;h5&gt;Basic&lt;/h5&gt;
&lt;Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" /&gt; &lt;Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" /&gt;
&lt;h3&gt;Editable&lt;/h3&gt; &lt;h5&gt;Editable&lt;/h5&gt;
&lt;Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/&gt; &lt;Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/&gt;
&lt;h3&gt;Advanced with Templating, Filtering and Clear Icon&lt;/h3&gt; &lt;h5&gt;Advanced with Templating, Filtering and Clear Icon&lt;/h5&gt;
&lt;Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" :filter="true" placeholder="Select a Car" :showClear="true"&gt; &lt;Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" :filter="true" placeholder="Select a Country" :showClear="true"&gt;
&lt;div class="p-dropdown-car-value" v-if="slotProps.value"&gt; &lt;template #value="slotProps"&gt;
&lt;img :alt="slotProps.value.brand" :src="'demo/images/car/' + slotProps.value.brand + '.png'" /&gt; &lt;div class="country-item country-item-value" v-if="slotProps.value"&gt;
&lt;span&gt;{{slotProps.value.brand}}&lt;/span&gt; &lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.value.code.toLowerCase()" /&gt;
&lt;/div&gt; &lt;div&gt;{{slotProps.value.name}}&lt;/div&gt;
&lt;span v-else&gt; &lt;/div&gt;
{{slotProps.placeholder}} &lt;span v-else&gt;
&lt;/span&gt; {{slotProps.placeholder}}
&lt;/span&gt;
&lt;/template&gt;
&lt;template #option="slotProps"&gt; &lt;template #option="slotProps"&gt;
&lt;div class="p-dropdown-car-option"&gt; &lt;div class="country-item"&gt;
&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt; &lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" /&gt;
&lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt; &lt;div&gt;{{slotProps.option.name}}&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Dropdown&gt; &lt;/Dropdown&gt;
@ -326,61 +328,32 @@ data() {
<CodeHighlight lang="javascript"> <CodeHighlight lang="javascript">
export default { export default {
data() { data() {
return { return {
selectedCity1: null, selectedCity1: null,
selectedCity2: null, selectedCity2: null,
selectedCar: null, selectedCountry: null,
cities: [ cities: [
{name: 'New York', code: 'NY'}, {name: 'New York', code: 'NY'},
{name: 'Rome', code: 'RM'}, {name: 'Rome', code: 'RM'},
{name: 'London', code: 'LDN'}, {name: 'London', code: 'LDN'},
{name: 'Istanbul', code: 'IST'}, {name: 'Istanbul', code: 'IST'},
{name: 'Paris', code: 'PRS'} {name: 'Paris', code: 'PRS'}
], ],
cars: [ countries: [
{brand: 'Audi', value: 'Audi'}, {name: 'Australia', code: 'AU'},
{brand: 'BMW', value: 'BMW'}, {name: 'Brazil', code: 'BR'},
{brand: 'Fiat', value: 'Fiat'}, {name: 'China', code: 'CN'},
{brand: 'Honda', value: 'Honda'}, {name: 'Egypt', code: 'EG'},
{brand: 'Jaguar', value: 'Jaguar'}, {name: 'France', code: 'FR'},
{brand: 'Mercedes', value: 'Mercedes'}, {name: 'Germany', code: 'DE'},
{brand: 'Renault', value: 'Renault'}, {name: 'India', code: 'IN'},
{brand: 'Volkswagen', value: 'Volkswagen'}, {name: 'Japan', code: 'JP'},
{brand: 'Volvo', value: 'Volvo'} {name: 'Spain', code: 'ES'},
] {name: 'United States', code: 'US'}
} ]
} }
} },
</CodeHighlight>
<CodeHighlight lang="css">
.p-dropdown {
width: 12rem;
}
.p-dropdown-car-option,
.p-dropdown-car-value {
display: flex;
justify-content: space-between;
align-items: center;
img {
margin-right: .5rem;
width: 24px;
}
span {
line-height: 1;
}
}
.p-dropdown-car-value {
justify-content: flex-start;
img {
width: 17px;
}
} }
</CodeHighlight> </CodeHighlight>
</TabPanel> </TabPanel>

47
src/views/listbox/ListboxDemo.vue
View File

@ -11,14 +11,14 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<h5>Single</h5> <h5>Single</h5>
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" style="width:15em" /> <Listbox v-model="selectedCity" :options="cities" optionLabel="name" style="width:15rem" />
<h5>Advanced with Templating, Filtering and Multiple Selection</h5> <h5>Advanced with Templating, Filtering and Multiple Selection</h5>
<Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em"> <Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width:15rem">
<template #option="slotProps"> <template #option="slotProps">
<div class="car-item"> <div class="country-item">
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /> <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
<span>{{slotProps.option.brand}}</span> <div>{{slotProps.option.name}}</div>
</div> </div>
</template> </template>
</Listbox> </Listbox>
@ -36,7 +36,7 @@ export default {
data() { data() {
return { return {
selectedCity: null, selectedCity: null,
selectedCars: null, selectedCountries: null,
cities: [ cities: [
{name: 'New York', code: 'NY'}, {name: 'New York', code: 'NY'},
{name: 'Rome', code: 'RM'}, {name: 'Rome', code: 'RM'},
@ -44,16 +44,17 @@ export default {
{name: 'Istanbul', code: 'IST'}, {name: 'Istanbul', code: 'IST'},
{name: 'Paris', code: 'PRS'} {name: 'Paris', code: 'PRS'}
], ],
cars: [ countries: [
{brand: 'Audi', value: 'Audi'}, {name: 'Australia', code: 'AU'},
{brand: 'BMW', value: 'BMW'}, {name: 'Brazil', code: 'BR'},
{brand: 'Fiat', value: 'Fiat'}, {name: 'China', code: 'CN'},
{brand: 'Honda', value: 'Honda'}, {name: 'Egypt', code: 'EG'},
{brand: 'Jaguar', value: 'Jaguar'}, {name: 'France', code: 'FR'},
{brand: 'Mercedes', value: 'Mercedes'}, {name: 'Germany', code: 'DE'},
{brand: 'Renault', value: 'Renault'}, {name: 'India', code: 'IN'},
{brand: 'Volkswagen', value: 'Volkswagen'}, {name: 'Japan', code: 'JP'},
{brand: 'Volvo', value: 'Volvo'} {name: 'Spain', code: 'ES'},
{name: 'United States', code: 'US'}
] ]
} }
}, },
@ -61,16 +62,4 @@ export default {
'ListboxDoc': ListboxDoc 'ListboxDoc': ListboxDoc
} }
} }
</script> </script>
<style lang="scss" scoped>
/deep/ .car-item {
display: flex;
justify-content: space-between;
align-items: center;
img {
width:32px;
}
}
</style>

73
src/views/listbox/ListboxDoc.vue
View File

@ -224,15 +224,15 @@ data() {
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;h3&gt;Single&lt;/h3&gt; &lt;h5&gt;Single&lt;/h5&gt;
&lt;Listbox v-model="selectedCity" :options="cities" optionLabel="name" style="width:15em" /&gt; &lt;Listbox v-model="selectedCity" :options="cities" optionLabel="name" style="width:15rem" /&gt;
&lt;h3&gt;Advanced with Templating, Filtering and Multiple Selection&lt;/h3&gt; &lt;h5&gt;Advanced with Templating, Filtering and Multiple Selection&lt;/h5&gt;
&lt;Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em"&gt; &lt;Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width:15rem"&gt;
&lt;template #option="slotProps"&gt; &lt;template #option="slotProps"&gt;
&lt;div class="car-item"&gt; &lt;div class="country-item"&gt;
&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt; &lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" /&gt;
&lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt; &lt;div&gt;{{slotProps.option.name}}&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Listbox&gt; &lt;/Listbox&gt;
@ -241,41 +241,30 @@ data() {
<CodeHighlight lang="javascript"> <CodeHighlight lang="javascript">
export default { export default {
data() { data() {
return { return {
selectedCity: null, selectedCity: null,
selectedCars: null, selectedCountries: null,
cities: [ cities: [
{name: 'New York', code: 'NY'}, {name: 'New York', code: 'NY'},
{name: 'Rome', code: 'RM'}, {name: 'Rome', code: 'RM'},
{name: 'London', code: 'LDN'}, {name: 'London', code: 'LDN'},
{name: 'Istanbul', code: 'IST'}, {name: 'Istanbul', code: 'IST'},
{name: 'Paris', code: 'PRS'} {name: 'Paris', code: 'PRS'}
], ],
cars: [ countries: [
{brand: 'Audi', value: 'Audi'}, {name: 'Australia', code: 'AU'},
{brand: 'BMW', value: 'BMW'}, {name: 'Brazil', code: 'BR'},
{brand: 'Fiat', value: 'Fiat'}, {name: 'China', code: 'CN'},
{brand: 'Honda', value: 'Honda'}, {name: 'Egypt', code: 'EG'},
{brand: 'Jaguar', value: 'Jaguar'}, {name: 'France', code: 'FR'},
{brand: 'Mercedes', value: 'Mercedes'}, {name: 'Germany', code: 'DE'},
{brand: 'Renault', value: 'Renault'}, {name: 'India', code: 'IN'},
{brand: 'Volkswagen', value: 'Volkswagen'}, {name: 'Japan', code: 'JP'},
{brand: 'Volvo', value: 'Volvo'} {name: 'Spain', code: 'ES'},
] {name: 'United States', code: 'US'}
} ]
} }
}
</CodeHighlight>
<CodeHighlight lang="css">
/deep/ .car-item {
display: flex;
justify-content: space-between;
align-items: center;
img {
width:32px;
} }
} }
</CodeHighlight> </CodeHighlight>