Nuxt forms layers

Forms layer package for Nuxt environment. Used on company site https://umserv.ru/

How to use

In parent Nuxt project:

1. Install the latest version as a dependency

npm i @umsoft/nuxt-forms-layers

2. Modify the root nuxt.config.ts file in the top-level project

// nuxt.config.ts
// here... defineNuxtConfig({ area
    extends: [
        '@umsoft/nuxt-forms-layers',
    ]
//});

3. Place the markup in needed component

<script setup lang="ts">
// show/hide modal form
const showModal = ref(true);

// show/hide options phone numbers list
const showPhoneFieldOptions = ref(false);

// provide data in options list of phone field
const dataPhoneNumbersProvider = useDataPhoneNumbersProvider();
const _phoneFieldOptionsList = ref(dataPhoneNumbersProvider);
const phoneFieldOptionsList = computed(() => _phoneFieldOptionsList.value); // readonly

// text field reactive value
const textInputData = ref('');
// phone field reactive value
const phoneInputData = ref('');

// state for valid value of phone field
const phoneFieldIsValid = ref<boolean>(false);

// state for submit button
const disableSubmitButton = computed(() => !phoneFieldIsValid.value);

const submitFormHandler = (fordData: {
    [k: string]: FormDataEntryValue;
}) => {
    console.log('Catch data here after click on submit button...', fordData);
};
</script>
<template>
    <ModalContainer v-model:show="showModal">
        <template #form>
            <FormContainer 
                @submit="submitFormHandler" 
                :disableSubmitButton="disableSubmitButton"
            >
                <template #title>
                    <span>Your form title</span>
                </template>
                <template #inputs>
                    <FormInputText 
                        :name="'fio'" 
                        :label="'Text Caption'" 
                        v-model="textInputData" 
                        />
                    <FormFieldPhone 
                        v-model:show-options="showPhoneFieldOptions"
                        v-model:option-list="phoneFieldOptionsList" 
                        v-model="phoneInputData"
                        v-model:is-valid="phoneFieldIsValid" 
                        />
                </template>
                <template #caption>
                    <span>Place for text/html discription block...</span>
                </template>
            </FormContainer>
        </template>
    </ModalContainer>
</template>