71 lines
1.9 KiB
Vue
71 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import AllCustom from './all-custom/all-custom.vue';
|
|
import TutorialForm from './tutorial-form/index.vue';
|
|
import ZodForm from './zod-form/index.vue';
|
|
|
|
const selectedCity = ref('NY');
|
|
const loading = ref(false);
|
|
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 loadSelectedCity = () => {
|
|
loading.value = true;
|
|
setTimeout(() => {
|
|
loading.value = false;
|
|
}, 2000);
|
|
};
|
|
const handleE = (eventName: string) => {
|
|
return (...args: any[]) => {
|
|
console.log('eventName :>> ', eventName);
|
|
console.log('args :>> ', args);
|
|
};
|
|
};
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="page-wrapper p-4">
|
|
<ZodForm v-if="false" />
|
|
<TutorialForm v-if="false" />
|
|
|
|
<!-- <div class="flex flex-col md:flex-row items-start p-4 gap-4"> -->
|
|
<div class="p-4 w-full bg-white rounded-lg shadow-md dark:bg-gray-800 dark:text-white">
|
|
<AllCustom />
|
|
</div>
|
|
<!-- </div> -->
|
|
|
|
<div class="p-4 w-full bg-white rounded-lg shadow-md dark:bg-gray-800 dark:text-white mt-4">
|
|
<Select
|
|
v-model="selectedCity"
|
|
:placeholder="loading ? 'Loading' : 'Select a City'"
|
|
:loading="loading"
|
|
class="w-full md:w-56"
|
|
:options="cities"
|
|
optionLabel="name"
|
|
optionValue="code"
|
|
@input="(e: any) => handleE('input')(e)"
|
|
@value-change="(e) => handleE('value-change')(e)"
|
|
@change="(e) => handleE('change')(e)"
|
|
@blur="(e) => handleE('blur')(e)"
|
|
></Select>
|
|
<Select
|
|
:options="cities"
|
|
class="w-full md:w-56"
|
|
>
|
|
<template #value="slotProps">{{ slotProps.value }}</template>
|
|
</Select>
|
|
<Button
|
|
id="load-selected-city"
|
|
label="Load Selected City"
|
|
@click="loadSelectedCity"
|
|
/>
|
|
{{ { selectedCity } }}
|
|
</div>
|
|
</div>
|
|
</template>
|