Add cascadeselect to float label demo
Cagatay Civici
parent
9bf713149f
commit
ccd25bb303
|
|
@ -289,7 +289,7 @@ export default {
|
|||
'p-disabled': this.disabled,
|
||||
'p-focus': this.focused,
|
||||
'p-inputwrapper-filled': this.modelValue,
|
||||
'p-inputwrapper-focus': this.focused
|
||||
'p-inputwrapper-focus': this.focused || this.overlayVisible
|
||||
}
|
||||
];
|
||||
},
|
||||
|
|
|
|||
|
|
@ -17,6 +17,20 @@
|
|||
<label for="inputtext">InputText</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<span class="p-float-label p-input-icon-left">
|
||||
<i class="pi pi-search" />
|
||||
<InputText id="inputtext-left" type="text" v-model="valueIconLeft" />
|
||||
<label for="inputtext-left">Left Icon</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<span class="p-float-label p-input-icon-left">
|
||||
<i class="pi pi-search" />
|
||||
<InputText id="inputtext-right" type="text" v-model="valueIconRight" />
|
||||
<label for="inputtext-right">Right Icon</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<span class="p-float-label">
|
||||
<AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
|
||||
|
|
@ -57,6 +71,13 @@
|
|||
<label for="inputgroup">InputGroup</label>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<span class="p-float-label">
|
||||
<CascadeSelect id="cascadeSelect" v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']" />
|
||||
<label for="multiselect">CascadeSelect</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<span class="p-float-label">
|
||||
|
|
@ -70,7 +91,7 @@
|
|||
<label for="multiselect">MultiSelect</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="p-field p-col-12">
|
||||
<span class="p-float-label">
|
||||
<Textarea id="textarea" v-model="value10" rows="3" />
|
||||
<label for="textarea">Textarea</label>
|
||||
|
|
@ -92,6 +113,20 @@
|
|||
<label for="inputtext">InputText</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<span class="p-float-label p-input-icon-left">
|
||||
<i class="pi pi-search" />
|
||||
<InputText id="inputtext-left" type="text" v-model="valueIconLeft" />
|
||||
<label for="inputtext-left">Left Icon</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<span class="p-float-label p-input-icon-left">
|
||||
<i class="pi pi-search" />
|
||||
<InputText id="inputtext-right" type="text" v-model="valueIconRight" />
|
||||
<label for="inputtext-right">Right Icon</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<span class="p-float-label">
|
||||
<AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
|
||||
|
|
@ -132,6 +167,13 @@
|
|||
<label for="inputgroup">InputGroup</label>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<span class="p-float-label">
|
||||
<CascadeSelect id="cascadeSelect" v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']" />
|
||||
<label for="multiselect">CascadeSelect</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<span class="p-float-label">
|
||||
|
|
@ -145,13 +187,14 @@
|
|||
<label for="multiselect">MultiSelect</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="p-field p-col-12">
|
||||
<span class="p-float-label">
|
||||
<Textarea id="textarea" v-model="value10" rows="3" />
|
||||
<label for="textarea">Textarea</label>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</code></pre>
|
||||
|
||||
|
|
@ -180,7 +223,84 @@ export default {
|
|||
value7: null,
|
||||
value8: null,
|
||||
value9: null,
|
||||
value10: null
|
||||
value10: null,
|
||||
selectedCity: null,
|
||||
cascadeCountries: [
|
||||
{
|
||||
name: 'Australia',
|
||||
code: 'AU',
|
||||
states: [
|
||||
{
|
||||
name: 'New South Wales',
|
||||
cities: [
|
||||
{cname: 'Sydney', code: 'A-SY'},
|
||||
{cname: 'Newcastle', code: 'A-NE'},
|
||||
{cname: 'Wollongong', code: 'A-WO'}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Queensland',
|
||||
cities: [
|
||||
{cname: 'Brisbane', code: 'A-BR'},
|
||||
{cname: 'Townsville', code: 'A-TO'}
|
||||
]
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Canada',
|
||||
code: 'CA',
|
||||
states: [
|
||||
{
|
||||
name: 'Quebec',
|
||||
cities: [
|
||||
{cname: 'Montreal', code: 'C-MO'},
|
||||
{cname: 'Quebec City', code: 'C-QU'}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Ontario',
|
||||
cities: [
|
||||
{cname: 'Ottawa', code: 'C-OT'},
|
||||
{cname: 'Toronto', code: 'C-TO'}
|
||||
]
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'United States',
|
||||
code: 'US',
|
||||
states: [
|
||||
{
|
||||
name: 'California',
|
||||
cities: [
|
||||
{cname: 'Los Angeles', code: 'US-LA'},
|
||||
{cname: 'San Diego', code: 'US-SD'},
|
||||
{cname: 'San Francisco', code: 'US-SF'}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Florida',
|
||||
cities: [
|
||||
{cname: 'Jacksonville', code: 'US-JA'},
|
||||
{cname: 'Miami', code: 'US-MI'},
|
||||
{cname: 'Tampa', code: 'US-TA'},
|
||||
{cname: 'Orlando', code: 'US-OR'}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Texas',
|
||||
cities: [
|
||||
{cname: 'Austin', code: 'US-AU'},
|
||||
{cname: 'Dallas', code: 'US-DA'},
|
||||
{cname: 'Houston', code: 'US-HO'}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
countryService: null,
|
||||
|
|
@ -237,7 +357,84 @@ export default {
|
|||
value7: null,
|
||||
value8: null,
|
||||
value9: null,
|
||||
value10: null
|
||||
value10: null,
|
||||
selectedCity: null,
|
||||
cascadeCountries: [
|
||||
{
|
||||
name: 'Australia',
|
||||
code: 'AU',
|
||||
states: [
|
||||
{
|
||||
name: 'New South Wales',
|
||||
cities: [
|
||||
{cname: 'Sydney', code: 'A-SY'},
|
||||
{cname: 'Newcastle', code: 'A-NE'},
|
||||
{cname: 'Wollongong', code: 'A-WO'}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Queensland',
|
||||
cities: [
|
||||
{cname: 'Brisbane', code: 'A-BR'},
|
||||
{cname: 'Townsville', code: 'A-TO'}
|
||||
]
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Canada',
|
||||
code: 'CA',
|
||||
states: [
|
||||
{
|
||||
name: 'Quebec',
|
||||
cities: [
|
||||
{cname: 'Montreal', code: 'C-MO'},
|
||||
{cname: 'Quebec City', code: 'C-QU'}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Ontario',
|
||||
cities: [
|
||||
{cname: 'Ottawa', code: 'C-OT'},
|
||||
{cname: 'Toronto', code: 'C-TO'}
|
||||
]
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'United States',
|
||||
code: 'US',
|
||||
states: [
|
||||
{
|
||||
name: 'California',
|
||||
cities: [
|
||||
{cname: 'Los Angeles', code: 'US-LA'},
|
||||
{cname: 'San Diego', code: 'US-SD'},
|
||||
{cname: 'San Francisco', code: 'US-SF'}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Florida',
|
||||
cities: [
|
||||
{cname: 'Jacksonville', code: 'US-JA'},
|
||||
{cname: 'Miami', code: 'US-MI'},
|
||||
{cname: 'Tampa', code: 'US-TA'},
|
||||
{cname: 'Orlando', code: 'US-OR'}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Texas',
|
||||
cities: [
|
||||
{cname: 'Austin', code: 'US-AU'},
|
||||
{cname: 'Dallas', code: 'US-DA'},
|
||||
{cname: 'Houston', code: 'US-HO'}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
countryService: null,
|
||||
|
|
|
|||
Loading…
Reference in New Issue