Updating demos with new content
cagataycivici
parent
a8e1ab6677
commit
5400fe9ecc
|
|
@ -1,7 +1,6 @@
|
|||
{
|
||||
"data": [
|
||||
{"name": "Afghanistan", "code": "AF"},
|
||||
{"name": "Åland Islands", "code": "AX"},
|
||||
{"name": "Albania", "code": "AL"},
|
||||
{"name": "Algeria", "code": "DZ"},
|
||||
{"name": "American Samoa", "code": "AS"},
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -111,4 +111,14 @@
|
|||
|
||||
.p-column-filter {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.country-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img.flag {
|
||||
width: 28px;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
<AutoComplete v-model="selectedCountry2" :suggestions="filteredCountries" @complete="searchCountry($event)" :dropdown="true" field="name">
|
||||
<template #item="slotProps">
|
||||
<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>
|
||||
</template>
|
||||
|
|
@ -72,15 +72,4 @@ export default {
|
|||
'AutoCompleteDoc': AutoCompleteDoc
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.country-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 28px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
|
|
@ -260,7 +260,7 @@ export default {
|
|||
<AutoComplete v-model="selectedCountry2" :suggestions="filteredCountries" @complete="searchCountry($event)" :dropdown="true" field="name">
|
||||
<template #item="slotProps">
|
||||
<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>
|
||||
</template>
|
||||
|
|
@ -308,17 +308,6 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="css">
|
||||
.country-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 28px;
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
|
|
|
|||
|
|
@ -313,6 +313,7 @@ export default {
|
|||
}
|
||||
else {
|
||||
this.product.id = this.createId();
|
||||
this.product.image = 'product-placeholder.svg';
|
||||
this.products.push(this.product);
|
||||
this.$toast.add({severity:'success', summary: 'Product Created', life: 3000});
|
||||
}
|
||||
|
|
@ -421,6 +422,7 @@ export default {
|
|||
}
|
||||
else {
|
||||
this.product.id = this.createId();
|
||||
this.product.image = 'product-placeholder.svg';
|
||||
this.products.push(this.product);
|
||||
this.$toast.add({severity:'success', summary: 'Product Created', life: 3000});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,20 +17,20 @@
|
|||
<Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
|
||||
|
||||
<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">
|
||||
<div class="p-dropdown-car-value" v-if="slotProps.value">
|
||||
<img :alt="slotProps.value.brand" :src="'demo/images/car/' + slotProps.value.brand + '.png'" />
|
||||
<span>{{slotProps.value.brand}}</span>
|
||||
<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()" />
|
||||
<div>{{slotProps.value.name}}</div>
|
||||
</div>
|
||||
<span v-else>
|
||||
{{slotProps.placeholder}}
|
||||
</span>
|
||||
</template>
|
||||
<template #option="slotProps">
|
||||
<div class="p-dropdown-car-option">
|
||||
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||
<span>{{slotProps.option.brand}}</span>
|
||||
<div class="country-item">
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
|
||||
<div>{{slotProps.option.name}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
|
|
@ -49,7 +49,7 @@ export default {
|
|||
return {
|
||||
selectedCity1: null,
|
||||
selectedCity2: null,
|
||||
selectedCar: null,
|
||||
selectedCountry: null,
|
||||
cities: [
|
||||
{name: 'New York', code: 'NY'},
|
||||
{name: 'Rome', code: 'RM'},
|
||||
|
|
@ -57,16 +57,17 @@ export default {
|
|||
{name: 'Istanbul', code: 'IST'},
|
||||
{name: 'Paris', code: 'PRS'}
|
||||
],
|
||||
cars: [
|
||||
{brand: 'Audi', value: 'Audi'},
|
||||
{brand: 'BMW', value: 'BMW'},
|
||||
{brand: 'Fiat', value: 'Fiat'},
|
||||
{brand: 'Honda', value: 'Honda'},
|
||||
{brand: 'Jaguar', value: 'Jaguar'},
|
||||
{brand: 'Mercedes', value: 'Mercedes'},
|
||||
{brand: 'Renault', value: 'Renault'},
|
||||
{brand: 'Volkswagen', value: 'Volkswagen'},
|
||||
{brand: 'Volvo', value: 'Volvo'}
|
||||
countries: [
|
||||
{name: 'Australia', code: 'AU'},
|
||||
{name: 'Brazil', code: 'BR'},
|
||||
{name: 'China', code: 'CN'},
|
||||
{name: 'Egypt', code: 'EG'},
|
||||
{name: 'France', code: 'FR'},
|
||||
{name: 'Germany', code: 'DE'},
|
||||
{name: 'India', code: 'IN'},
|
||||
{name: 'Japan', code: 'JP'},
|
||||
{name: 'Spain', code: 'ES'},
|
||||
{name: 'United States', code: 'US'}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
|
@ -78,29 +79,11 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.p-dropdown {
|
||||
width: 12rem;
|
||||
width: 14rem;
|
||||
}
|
||||
|
||||
.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 {
|
||||
.country-item-value {
|
||||
img.flag {
|
||||
width: 17px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -299,25 +299,27 @@ data() {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<h3>Basic</h3>
|
||||
<h5>Basic</h5>
|
||||
<Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" />
|
||||
|
||||
<h3>Editable</h3>
|
||||
<h5>Editable</h5>
|
||||
<Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
|
||||
|
||||
<h3>Advanced with Templating, Filtering and Clear Icon</h3>
|
||||
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" :filter="true" placeholder="Select a Car" :showClear="true">
|
||||
<div class="p-dropdown-car-value" v-if="slotProps.value">
|
||||
<img :alt="slotProps.value.brand" :src="'demo/images/car/' + slotProps.value.brand + '.png'" />
|
||||
<span>{{slotProps.value.brand}}</span>
|
||||
</div>
|
||||
<span v-else>
|
||||
{{slotProps.placeholder}}
|
||||
</span>
|
||||
<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()" />
|
||||
<div>{{slotProps.value.name}}</div>
|
||||
</div>
|
||||
<span v-else>
|
||||
{{slotProps.placeholder}}
|
||||
</span>
|
||||
</template>
|
||||
<template #option="slotProps">
|
||||
<div class="p-dropdown-car-option">
|
||||
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||
<span>{{slotProps.option.brand}}</span>
|
||||
<div class="country-item">
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
|
||||
<div>{{slotProps.option.name}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
|
|
@ -326,61 +328,32 @@ data() {
|
|||
|
||||
<CodeHighlight lang="javascript">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedCity1: null,
|
||||
selectedCity2: null,
|
||||
selectedCar: null,
|
||||
cities: [
|
||||
{name: 'New York', code: 'NY'},
|
||||
{name: 'Rome', code: 'RM'},
|
||||
{name: 'London', code: 'LDN'},
|
||||
{name: 'Istanbul', code: 'IST'},
|
||||
{name: 'Paris', code: 'PRS'}
|
||||
],
|
||||
cars: [
|
||||
{brand: 'Audi', value: 'Audi'},
|
||||
{brand: 'BMW', value: 'BMW'},
|
||||
{brand: 'Fiat', value: 'Fiat'},
|
||||
{brand: 'Honda', value: 'Honda'},
|
||||
{brand: 'Jaguar', value: 'Jaguar'},
|
||||
{brand: 'Mercedes', value: 'Mercedes'},
|
||||
{brand: 'Renault', value: 'Renault'},
|
||||
{brand: 'Volkswagen', value: 'Volkswagen'},
|
||||
{brand: 'Volvo', value: 'Volvo'}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
data() {
|
||||
return {
|
||||
selectedCity1: null,
|
||||
selectedCity2: null,
|
||||
selectedCountry: null,
|
||||
cities: [
|
||||
{name: 'New York', code: 'NY'},
|
||||
{name: 'Rome', code: 'RM'},
|
||||
{name: 'London', code: 'LDN'},
|
||||
{name: 'Istanbul', code: 'IST'},
|
||||
{name: 'Paris', code: 'PRS'}
|
||||
],
|
||||
countries: [
|
||||
{name: 'Australia', code: 'AU'},
|
||||
{name: 'Brazil', code: 'BR'},
|
||||
{name: 'China', code: 'CN'},
|
||||
{name: 'Egypt', code: 'EG'},
|
||||
{name: 'France', code: 'FR'},
|
||||
{name: 'Germany', code: 'DE'},
|
||||
{name: 'India', code: 'IN'},
|
||||
{name: 'Japan', code: 'JP'},
|
||||
{name: 'Spain', code: 'ES'},
|
||||
{name: 'United States', code: 'US'}
|
||||
]
|
||||
}
|
||||
},
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
|
|
|
|||
|
|
@ -11,14 +11,14 @@
|
|||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<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>
|
||||
<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">
|
||||
<div class="car-item">
|
||||
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||
<span>{{slotProps.option.brand}}</span>
|
||||
<div class="country-item">
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
|
||||
<div>{{slotProps.option.name}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</Listbox>
|
||||
|
|
@ -36,7 +36,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
selectedCity: null,
|
||||
selectedCars: null,
|
||||
selectedCountries: null,
|
||||
cities: [
|
||||
{name: 'New York', code: 'NY'},
|
||||
{name: 'Rome', code: 'RM'},
|
||||
|
|
@ -44,16 +44,17 @@ export default {
|
|||
{name: 'Istanbul', code: 'IST'},
|
||||
{name: 'Paris', code: 'PRS'}
|
||||
],
|
||||
cars: [
|
||||
{brand: 'Audi', value: 'Audi'},
|
||||
{brand: 'BMW', value: 'BMW'},
|
||||
{brand: 'Fiat', value: 'Fiat'},
|
||||
{brand: 'Honda', value: 'Honda'},
|
||||
{brand: 'Jaguar', value: 'Jaguar'},
|
||||
{brand: 'Mercedes', value: 'Mercedes'},
|
||||
{brand: 'Renault', value: 'Renault'},
|
||||
{brand: 'Volkswagen', value: 'Volkswagen'},
|
||||
{brand: 'Volvo', value: 'Volvo'}
|
||||
countries: [
|
||||
{name: 'Australia', code: 'AU'},
|
||||
{name: 'Brazil', code: 'BR'},
|
||||
{name: 'China', code: 'CN'},
|
||||
{name: 'Egypt', code: 'EG'},
|
||||
{name: 'France', code: 'FR'},
|
||||
{name: 'Germany', code: 'DE'},
|
||||
{name: 'India', code: 'IN'},
|
||||
{name: 'Japan', code: 'JP'},
|
||||
{name: 'Spain', code: 'ES'},
|
||||
{name: 'United States', code: 'US'}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
|
@ -61,16 +62,4 @@ export default {
|
|||
'ListboxDoc': ListboxDoc
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/deep/ .car-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width:32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
|
|
@ -224,15 +224,15 @@ data() {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<h3>Single</h3>
|
||||
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" style="width:15em" />
|
||||
<h5>Single</h5>
|
||||
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" style="width:15rem" />
|
||||
|
||||
<h3>Advanced with Templating, Filtering and Multiple Selection</h3>
|
||||
<Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em">
|
||||
<h5>Advanced with Templating, Filtering and Multiple Selection</h5>
|
||||
<Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width:15rem">
|
||||
<template #option="slotProps">
|
||||
<div class="car-item">
|
||||
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||
<span>{{slotProps.option.brand}}</span>
|
||||
<div class="country-item">
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
|
||||
<div>{{slotProps.option.name}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</Listbox>
|
||||
|
|
@ -241,41 +241,30 @@ data() {
|
|||
|
||||
<CodeHighlight lang="javascript">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedCity: null,
|
||||
selectedCars: null,
|
||||
cities: [
|
||||
{name: 'New York', code: 'NY'},
|
||||
{name: 'Rome', code: 'RM'},
|
||||
{name: 'London', code: 'LDN'},
|
||||
{name: 'Istanbul', code: 'IST'},
|
||||
{name: 'Paris', code: 'PRS'}
|
||||
],
|
||||
cars: [
|
||||
{brand: 'Audi', value: 'Audi'},
|
||||
{brand: 'BMW', value: 'BMW'},
|
||||
{brand: 'Fiat', value: 'Fiat'},
|
||||
{brand: 'Honda', value: 'Honda'},
|
||||
{brand: 'Jaguar', value: 'Jaguar'},
|
||||
{brand: 'Mercedes', value: 'Mercedes'},
|
||||
{brand: 'Renault', value: 'Renault'},
|
||||
{brand: 'Volkswagen', value: 'Volkswagen'},
|
||||
{brand: 'Volvo', value: 'Volvo'}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="css">
|
||||
/deep/ .car-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width:32px;
|
||||
data() {
|
||||
return {
|
||||
selectedCity: null,
|
||||
selectedCountries: null,
|
||||
cities: [
|
||||
{name: 'New York', code: 'NY'},
|
||||
{name: 'Rome', code: 'RM'},
|
||||
{name: 'London', code: 'LDN'},
|
||||
{name: 'Istanbul', code: 'IST'},
|
||||
{name: 'Paris', code: 'PRS'}
|
||||
],
|
||||
countries: [
|
||||
{name: 'Australia', code: 'AU'},
|
||||
{name: 'Brazil', code: 'BR'},
|
||||
{name: 'China', code: 'CN'},
|
||||
{name: 'Egypt', code: 'EG'},
|
||||
{name: 'France', code: 'FR'},
|
||||
{name: 'Germany', code: 'DE'},
|
||||
{name: 'India', code: 'IN'},
|
||||
{name: 'Japan', code: 'JP'},
|
||||
{name: 'Spain', code: 'ES'},
|
||||
{name: 'United States', code: 'US'}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
|
|
|||
Loading…
Reference in New Issue