From 64ca83ffe2dd45a9c8705419e6dac5b4ca987432 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Wed, 20 Jan 2021 10:45:59 +0300 Subject: [PATCH] Add cascadeselect to invalidstate demo --- src/views/invalid/InvalidDemo.vue | 166 +++++++++++++++++++++++++++++- 1 file changed, 164 insertions(+), 2 deletions(-) diff --git a/src/views/invalid/InvalidDemo.vue b/src/views/invalid/InvalidDemo.vue index cb1191a59..4d423c984 100644 --- a/src/views/invalid/InvalidDemo.vue +++ b/src/views/invalid/InvalidDemo.vue @@ -29,6 +29,10 @@
+
+ +
@@ -66,6 +70,10 @@ <div class="p-field p-col-12 p-md-4"> <InputNumber id="inputnumber" v-model="value6" placeholder="InputNumber" class="p-invalid" /> </div> + <div class="p-field p-col-12 p-md-4"> + <CascadeSelect v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name" + :optionGroupChildren="['states', 'cities']" placeholder="CascadeSelect" class="p-invalid" /> + </div> <div class="p-field p-col-12 p-md-4"> <Dropdown id="dropdown" v-model="value7" :options="cities" optionLabel="name" placeholder="Dropdown" class="p-invalid" /> </div> @@ -103,7 +111,84 @@ export default { value6: null, value7: null, value8: null, - value9: null + value9: 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, @@ -159,7 +244,84 @@ export default { value6: null, value7: null, value8: null, - value9: null + value9: 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,