InvalidStateDemo.vue
4.27 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<template>
<div class="grid grid-nogutter">
<div class="card" style="width: 100%">
<h5>Invalid State</h5>
<p>All form components have an invalid state style to display the validation errors.</p>
<div class="p-fluid grid">
<div class="col-12 md:col-6">
<div class="field">
<label for="inputtext">InputText</label>
<InputText id="inputtext" type="text" v-model="value1" class="p-invalid" />
</div>
<div class="field">
<label for="autocomplete">AutoComplete</label>
<AutoComplete id="autocomplete" v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" class="p-invalid" />
</div>
<div class="field">
<label for="calendar">Calendar</label>
<Calendar id="calendar" v-model="value3" class="p-invalid" :showIcon="true" />
</div>
<div class="field">
<label for="chips">Chips</label>
<Chips id="chips" v-model="value4" class="p-invalid" />
</div>
<div class="field">
<label for="password">Password</label>
<Password id="password" v-model="value10" class="p-invalid" />
</div>
</div>
<div class="col-12 md:col-6">
<div class="field">
<label for="inputmask">InputMask</label>
<InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" class="p-invalid" />
</div>
<div class="field">
<label for="inputnumber">InputNumber</label>
<InputNumber id="inputnumber" v-model="value6" class="p-invalid" />
</div>
<div class="field">
<label for="dropdown">Dropdown</label>
<Dropdown id="dropdown" v-model="value7" :options="cities" optionLabel="name" class="p-invalid" />
</div>
<div class="field">
<label for="multiselect">MultiSelect</label>
<MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" class="p-invalid" />
</div>
<div class="field">
<label for="textarea">Textarea</label>
<Textarea id="textarea" v-model="value9" rows="3" class="p-invalid" />
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import CountryService from '@/service/CountryService';
export default {
data() {
return {
countries: null,
filteredCountries: null,
cities: [
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' },
],
value1: null,
value2: null,
value3: null,
value4: null,
value5: null,
value6: null,
value7: null,
value8: null,
value9: null,
value10: null,
};
},
countryService: null,
created() {
this.countryService = new CountryService();
},
mounted() {
this.countryService.getCountries().then((data) => (this.countries = data));
},
methods: {
searchCountry(event) {
setTimeout(() => {
if (!event.query.trim().length) {
this.filteredCountries = [...this.countries];
} else {
this.filteredCountries = this.countries.filter((country) => {
return country.name.toLowerCase().startsWith(event.query.toLowerCase());
});
}
}, 250);
},
},
};
</script>
<style lang="scss" scoped></style>