primevue-mirror/pages/floatlabel/index.vue

<template>
    <div>
        <div class="content-section introduction">
            <div class="feature-intro">
                <h1>Float Label</h1>
                <p>All input text components support floating labels.</p>
            </div>
            <AppDemoActions />
        </div>

        <div class="content-section implementation">
            <div class="card">
                <div class="p-fluid grid">
                    <div class="field col-12 md:col-4">
                        <span class="p-float-label">
                            <InputText id="inputtext" v-model="value1" type="text" />
                            <label for="inputtext">InputText</label>
                        </span>
                    </div>
                    <div class="field col-12 md:col-4">
                        <span class="p-float-label p-input-icon-left">
                            <i class="pi pi-search" />
                            <InputText id="inputtext-left" v-model="valueIconLeft" type="text" />
                            <label for="inputtext-left">Left Icon</label>
                        </span>
                    </div>
                    <div class="field col-12 md:col-4">
                        <span class="p-float-label p-input-icon-right">
                            <i class="pi pi-search" />
                            <InputText id="inputtext-right" v-model="valueIconRight" type="text" />
                            <label for="inputtext-right">Right Icon</label>
                        </span>
                    </div>
                    <div class="field col-12 md:col-4">
                        <span class="p-float-label">
                            <AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
                            <label for="autocomplete">AutoComplete</label>
                        </span>
                    </div>
                    <div class="field col-12 md:col-4">
                        <span class="p-float-label">
                            <Calendar id="calendar" v-model="value3" />
                            <label for="calendar">Calendar</label>
                        </span>
                    </div>
                    <div class="field col-12 md:col-4">
                        <span class="p-float-label">
                            <Chips id="chips" v-model="value4" />
                            <label for="chips">Chips</label>
                        </span>
                    </div>
                    <div class="field col-12 md:col-4">
                        <span class="p-float-label">
                            <InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" />
                            <label for="inputmask">InputMask</label>
                        </span>
                    </div>
                    <div class="field col-12 md:col-4">
                        <span class="p-float-label">
                            <InputNumber id="inputnumber" v-model="value6" />
                            <label for="inputnumber">InputNumber</label>
                        </span>
                    </div>
                    <div class="field col-12 md:col-4">
                        <div class="p-inputgroup">
                            <span class="p-inputgroup-addon">
                                <i class="pi pi-user"></i>
                            </span>
                            <span class="p-float-label">
                                <InputText id="inputgroup" v-model="value7" type="text" />
                                <label for="inputgroup">InputGroup</label>
                            </span>
                        </div>
                    </div>
                    <div class="field col-12 md:col-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="field col-12 md:col-4">
                        <span class="p-float-label">
                            <Dropdown id="dropdown" v-model="value8" :options="cities" optionLabel="name" />
                            <label for="dropdown">Dropdown</label>
                        </span>
                    </div>
                    <div class="field col-12 md:col-4">
                        <span class="p-float-label">
                            <MultiSelect id="multiselect" v-model="value9" :options="cities" optionLabel="name" />
                            <label for="multiselect">MultiSelect</label>
                        </span>
                    </div>
                    <div class="field col-12 md:col-4">
                        <span class="p-float-label">
                            <TreeSelect v-model="selectedNode" :options="nodes"></TreeSelect>
                            <label for="treeselect">TreeSelect</label>
                        </span>
                    </div>
                    <div class="field col-12 md:col-4">
                        <span class="p-float-label">
                            <Password id="password" v-model="value11" />
                            <label for="password">Password</label>
                        </span>
                    </div>
                    <div class="field col-12 md:col-4">
                        <span class="p-float-label">
                            <Textarea id="textarea" v-model="value10" rows="3" />
                            <label for="textarea">Textarea</label>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <AppDoc name="FloatLabelDemo" :sources="sources" :service="['CountryService', 'NodeService']" :data="['countries', 'treenodes']" />
    </div>
</template>

<script>
import CountryService from '../../service/CountryService';
import NodeService from '../../service/NodeService';

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,
            value11: null,
            valueIconLeft: null,
            valueIconRight: null,
            selectedCity: null,
            nodes: null,
            selectedNode: 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' }
                            ]
                        }
                    ]
                }
            ],
            sources: {
                'options-api': {
                    tabName: 'Options API Source',
                    content: `
<template>
    <div>
        <div class="card">
            <div class="p-fluid grid">
                <div class="field col-12 md:col-4">
                    <span class="p-float-label">
                        <InputText id="inputtext" type="text" v-model="value1" />
                        <label for="inputtext">InputText</label>
                    </span>
                </div>
                <div class="field col-12 md:col-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="field col-12 md:col-4">
                    <span class="p-float-label p-input-icon-right">
                        <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="field col-12 md:col-4">
                    <span class="p-float-label">
                        <AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
                        <label for="autocomplete">AutoComplete</label>
                    </span>
                </div>
                <div class="field col-12 md:col-4">
                    <span class="p-float-label">
                        <Calendar id="calendar" v-model="value3" />
                        <label for="calendar">Calendar</label>
                    </span>
                </div>
                <div class="field col-12 md:col-4">
                    <span class="p-float-label">
                        <Chips id="chips" v-model="value4" />
                        <label for="chips">Chips</label>
                    </span>
                </div>
                <div class="field col-12 md:col-4">
                    <span class="p-float-label">
                        <InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" />
                        <label for="inputmask">InputMask</label>
                    </span>
                </div>
                <div class="field col-12 md:col-4">
                    <span class="p-float-label">
                        <InputNumber id="inputnumber" v-model="value6" />
                        <label for="inputnumber">InputNumber</label>
                    </span>
                </div>
                <div class="field col-12 md:col-4">
                    <div class="p-inputgroup">
                        <span class="p-inputgroup-addon">
                            <i class="pi pi-user"></i>
                        </span>
                        <span class="p-float-label">
                            <InputText id="inputgroup" type="text" v-model="value7" />
                            <label for="inputgroup">InputGroup</label>
                        </span>
                    </div>
                </div>
                <div class="field col-12 md:col-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="field col-12 md:col-4">
                    <span class="p-float-label">
                        <Dropdown id="dropdown" v-model="value8" :options="cities" optionLabel="name" />
                        <label for="dropdown">Dropdown</label>
                    </span>
                </div>
                <div class="field col-12 md:col-4">
                    <span class="p-float-label">
                        <MultiSelect id="multiselect" v-model="value9" :options="cities" optionLabel="name" />
                        <label for="multiselect">MultiSelect</label>
                    </span>
                </div>
                <div class="field col-12 md:col-4">
                    <span class="p-float-label">
                        <TreeSelect v-model="selectedNode" :options="nodes"></TreeSelect>
                        <label for="treeselect">TreeSelect</label>
                    </span>
                </div>
                <div class="field col-12 md:col-4">
                    <span class="p-float-label">
                        <Password id="password" v-model="value11" />
                        <label for="password">Password</label>
                    </span>
                </div>
                <div class="field col-12 md:col-4">
                    <span class="p-float-label">
                        <Textarea id="textarea" v-model="value10" rows="3" />
                        <label for="textarea">Textarea</label>
                    </span>
                </div>
            </div>
        </div>
    </div>                    
</template>

<script>
import CountryService from './service/CountryService';
import NodeService from './service/NodeService';

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,
            value11: null,
            valueIconLeft: null,
            valueIconRight: null,
            selectedCity: null,
            nodes: null,
            selectedNode: 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,
    nodeService: null,
    created() {
        this.countryService = new CountryService();
        this.nodeService = new NodeService();
    },
    mounted() {
        this.countryService.getCountries().then(data => this.countries = data);
        this.nodeService.getTreeNodes().then(data => this.nodes = 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>
`
                },
                'composition-api': {
                    tabName: 'Composition API Source',
                    content: `
<template>
    <div>
        <div class="card">
            <div class="p-fluid grid">
                <div class="field col-12 md:col-4">
                    <span class="p-float-label">
                        <InputText id="inputtext" type="text" v-model="value1" />
                        <label for="inputtext">InputText</label>
                    </span>
                </div>
                <div class="field col-12 md:col-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="field col-12 md:col-4">
                    <span class="p-float-label p-input-icon-right">
                        <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="field col-12 md:col-4">
                    <span class="p-float-label">
                        <AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
                        <label for="autocomplete">AutoComplete</label>
                    </span>
                </div>
                <div class="field col-12 md:col-4">
                    <span class="p-float-label">
                        <Calendar id="calendar" v-model="value3" />
                        <label for="calendar">Calendar</label>
                    </span>
                </div>
                <div class="field col-12 md:col-4">
                    <span class="p-float-label">
                        <Chips id="chips" v-model="value4" />
                        <label for="chips">Chips</label>
                    </span>
                </div>
                <div class="field col-12 md:col-4">
                    <span class="p-float-label">
                        <InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" />
                        <label for="inputmask">InputMask</label>
                    </span>
                </div>
                <div class="field col-12 md:col-4">
                    <span class="p-float-label">
                        <InputNumber id="inputnumber" v-model="value6" />
                        <label for="inputnumber">InputNumber</label>
                    </span>
                </div>
                <div class="field col-12 md:col-4">
                    <div class="p-inputgroup">
                        <span class="p-inputgroup-addon">
                            <i class="pi pi-user"></i>
                        </span>
                        <span class="p-float-label">
                            <InputText id="inputgroup" type="text" v-model="value7" />
                            <label for="inputgroup">InputGroup</label>
                        </span>
                    </div>
                </div>
                <div class="field col-12 md:col-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="field col-12 md:col-4">
                    <span class="p-float-label">
                        <Dropdown id="dropdown" v-model="value8" :options="cities" optionLabel="name" />
                        <label for="dropdown">Dropdown</label>
                    </span>
                </div>
                <div class="field col-12 md:col-4">
                    <span class="p-float-label">
                        <MultiSelect id="multiselect" v-model="value9" :options="cities" optionLabel="name" />
                        <label for="multiselect">MultiSelect</label>
                    </span>
                </div>
                <div class="field col-12 md:col-4">
                    <span class="p-float-label">
                        <TreeSelect v-model="selectedNode" :options="nodes"></TreeSelect>
                        <label for="treeselect">TreeSelect</label>
                    </span>
                </div>
                <div class="field col-12 md:col-4">
                    <span class="p-float-label">
                        <Password id="password" v-model="value11" />
                        <label for="password">Password</label>
                    </span>
                </div>
                <div class="field col-12 md:col-4">
                    <span class="p-float-label">
                        <Textarea id="textarea" v-model="value10" rows="3" />
                        <label for="textarea">Textarea</label>
                    </span>
                </div>
            </div>
        </div>
    </div>                    
</template>

<script>
import { ref, onMounted } from 'vue';
import CountryService from './service/CountryService';
import NodeService from './service/NodeService';

export default {
    setup() {
        onMounted(() => {
            countryService.value.getCountries().then(data => countries.value = data);
            nodeService.value.getTreeNodes().then(data => nodes.value = data);
        })
        const countryService = ref(new CountryService());
        const nodeService = ref(new NodeService());
        const countries = ref();
        const filteredCountries = ref();
        const cities = ref([
            {name: 'New York', code: 'NY'},
            {name: 'Rome', code: 'RM'},
            {name: 'London', code: 'LDN'},
            {name: 'Istanbul', code: 'IST'},
            {name: 'Paris', code: 'PRS'}
        ]);
        const value1 = ref();
        const value2 = ref();
        const value3 = ref();
        const value4 = ref();
        const value5 = ref();
        const value6 = ref();
        const value7 = ref();
        const value8 = ref();
        const value9 = ref();
        const value10 = ref();
        const value11 = ref();
        const valueIconLeft = ref();
        const valueIconRight = ref();
        const selectedCity = ref();
        const selectedNode = ref();
        const nodes = ref();
        const cascadeCountries = ref([
            {
                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'}
                            ]
                        }
                    ]
                }
            ]);

        const searchCountry = (event) => {
            setTimeout(() => {
                if (!event.query.trim().length) {
                    filteredCountries.value = [...countries.value];
                }
                else {
                    filteredCountries.value = countries.value.filter((country) => {
                        return country.name.toLowerCase().startsWith(event.query.toLowerCase());
                    });
                }
            }, 250);
        };

        return { countryService, countries, filteredCountries, cities, value1, value2, value3, value4, value5, value6, 
            value7, value8, value9, value10, value11, valueIconLeft, valueIconRight, selectedCity, cascadeCountries, searchCountry,
            nodes, selectedNode }
    }
}
<\\/script>
`
                },
                'browser-source': {
                    tabName: 'Browser Source',
                    imports: `<script src="https://unpkg.com/primevue@^3/autocomplete/autocomplete.min.js"><\\/script>
        <script src="https://unpkg.com/primevue@^3/calendar/calendar.min.js"><\\/script>
        <script src="https://unpkg.com/primevue@^3/chips/chips.min.js"><\\/script>
        <script src="https://unpkg.com/primevue@^3/inputmask/inputmask.min.js"><\\/script>
        <script src="https://unpkg.com/primevue@^3/cascadeselect/cascadeselect.min.js"><\\/script>
        <script src="https://unpkg.com/primevue@^3/multiselect/multiselect.min.js"><\\/script>
        <script src="https://unpkg.com/primevue@^3/treeselect/treeselect.min.js"><\\/script>
        <script src="https://unpkg.com/primevue@^3/password/password.min.js"><\\/script>
        <script src="https://unpkg.com/primevue@^3/textarea/textarea.min.js"><\\/script>
        <script src="./CountryService.js"><\\/script>
        <script src="./NodeService.js"><\\/script>`,
                    content: `<div id="app">
            <div class="card">
                <div class="p-fluid grid">
                    <div class="field col-12 md:col-4">
                        <span class="p-float-label">
                            <p-inputtext id="inputtext" type="text" v-model="value1"></p-inputtext>
                            <label for="inputtext">InputText</label>
                        </span>
                    </div>
                    <div class="field col-12 md:col-4">
                        <span class="p-float-label p-input-icon-left">
                            <i class="pi pi-search"></i>
                            <p-inputtext id="inputtext-left" type="text" v-model="valueIconLeft"></p-inputtext>
                            <label for="inputtext-left">Left Icon</label>
                        </span>
                    </div>
                    <div class="field col-12 md:col-4">
                    <span class="p-float-label p-input-icon-right">
                            <i class="pi pi-search"></i>
                            <p-inputtext id="inputtext-right" type="text" v-model="valueIconRight"></p-inputtext>
                            <label for="inputtext-right">Right Icon</label>
                        </span>
                    </div>
                    <div class="field col-12 md:col-4">
                        <span class="p-float-label">
                            <p-autocomplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name"></p-autocomplete>
                            <label for="autocomplete">AutoComplete</label>
                        </span>
                    </div>
                    <div class="field col-12 md:col-4">
                        <span class="p-float-label">
                            <p-calendar id="calendar" v-model="value3"></p-calendar>
                            <label for="calendar">Calendar</label>
                        </span>
                    </div>
                    <div class="field col-12 md:col-4">
                        <span class="p-float-label">
                            <p-chips id="chips" v-model="value4"></p-chips>
                            <label for="chips">Chips</label>
                        </span>
                    </div>
                    <div class="field col-12 md:col-4">
                        <span class="p-float-label">
                            <p-inputmask id="inputmask" v-model="value5" mask="99/99/9999" slot-char="mm/dd/yyyy"></p-inputmask>
                            <label for="inputmask">InputMask</label>
                        </span>
                    </div>
                    <div class="field col-12 md:col-4">
                        <span class="p-float-label">
                            <p-inputnumber id="inputnumber" v-model="value6"></p-inputnumber>
                            <label for="inputnumber">InputNumber</label>
                        </span>
                    </div>
                    <div class="field col-12 md:col-4">
                        <div class="p-inputgroup">
                            <span class="p-inputgroup-addon">
                                <i class="pi pi-user"></i>
                            </span>
                            <span class="p-float-label">
                                <p-inputtext id="inputgroup" type="text" v-model="value7" />
                                <label for="inputgroup">InputGroup</label>
                            </span>
                        </div>
                    </div>
                    <div class="field col-12 md:col-4">
                        <span class="p-float-label">
                            <p-cascadeselect id="cascadeSelect" v-model="selectedCity" :options="cascadeCountries" option-label="cname" option-group-label="name"
                                :option-group-children="['states', 'cities']"></p-cascadeselect>
                            <label for="multiselect">CascadeSelect</label>
                        </span>
                    </div>
                    <div class="field col-12 md:col-4">
                        <span class="p-float-label">
                            <p-dropdown id="dropdown" v-model="value8" :options="cities" option-label="name"></p-dropdown>
                            <label for="dropdown">Dropdown</label>
                        </span>
                    </div>
                    <div class="field col-12 md:col-4">
                        <span class="p-float-label">
                            <p-multiselect id="multiselect" v-model="value9" :options="cities" option-label="name">
                            <label for="multiselect">MultiSelect</label>
                        </span>
                    </div>
                    <div class="field col-12 md:col-4">
                        <span class="p-float-label">
                            <p-treeselect v-model="selectedNode" :options="nodes"></p-treeselect>
                            <label for="treeselect">TreeSelect</label>
                        </span>
                    </div>
                    <div class="field col-12 md:col-4">
                        <span class="p-float-label">
                            <p-password id="password" v-model="value11"></p-password>
                            <label for="password">Password</label>
                        </span>
                    </div>
                    <div class="field col-12 md:col-4">
                        <span class="p-float-label">
                            <p-textarea id="textarea" v-model="value10" rows="3"></p-textarea>
                            <label for="textarea">Textarea</label>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <script type="module">
        const { createApp, ref, onMounted } = Vue;

        const App = {
            setup() {
                onMounted(() => {
                    countryService.value.getCountries().then(data => countries.value = data);
                    nodeService.value.getTreeNodes().then(data => nodes.value = data);
                })
                const countryService = ref(new CountryService());
                const nodeService = ref(new NodeService());
                const countries = ref();
                const filteredCountries = ref();
                const cities = ref([
                    {name: 'New York', code: 'NY'},
                    {name: 'Rome', code: 'RM'},
                    {name: 'London', code: 'LDN'},
                    {name: 'Istanbul', code: 'IST'},
                    {name: 'Paris', code: 'PRS'}
                ]);
                const value1 = ref();
                const value2 = ref();
                const value3 = ref();
                const value4 = ref();
                const value5 = ref();
                const value6 = ref();
                const value7 = ref();
                const value8 = ref();
                const value9 = ref();
                const value10 = ref();
                const value11 = ref();
                const valueIconLeft = ref();
                const valueIconRight = ref();
                const selectedCity = ref();
                const selectedNode = ref();
                const nodes = ref();
            const cascadeCountries = ref([
                {
                    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'}
                                ]
                            }
                        ]
                    }
                ]);

                const searchCountry = (event) => {
                    setTimeout(() => {
                        if (!event.query.trim().length) {
                            filteredCountries.value = [...countries.value];
                        }
                        else {
                            filteredCountries.value = countries.value.filter((country) => {
                                return country.name.toLowerCase().startsWith(event.query.toLowerCase());
                            });
                        }
                    }, 250);
                };

                return { countryService, countries, filteredCountries, cities, value1, value2, value3, value4, value5, value6, 
                    value7, value8, value9, value10, value11, valueIconLeft, valueIconRight, selectedCity, cascadeCountries, searchCountry,
                    nodes, selectedNode }
            },
            components: {
                "p-inputtext": primevue.inputtext,
                "p-inputnumber": primevue.inputnumber,
                "p-autocomplete": primevue.autocomplete,
                "p-calendar": primevue.calendar,
                "p-chips": primevue.chips,
                "p-inputmask": primevue.inputmask,
                "p-cascadeselect": primevue.cascadeselect,
                "p-dropdown": primevue.dropdown,
                "p-multiselect": primevue.multiselect,
                "p-treeselect": primevue.treeselect,
                "p-password": primevue.password,
                "p-textarea": primevue.textarea
            }
        };
        
        createApp(App)
            .use(primevue.config.default)
            .mount("#app");
        <\\/script>
`
                }
            }
        };
    },
    countryService: null,
    nodeService: null,
    created() {
        this.countryService = new CountryService();
        this.nodeService = new NodeService();
    },
    mounted() {
        this.countryService.getCountries().then((data) => (this.countries = data));
        this.nodeService.getTreeNodes().then((data) => (this.nodes = 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>
textarea {
    resize: none;
}
</style>