Composite Input

const languages = [
	{ label: 'EN', code: 'en' },
	{ label: 'TR', code: 'tr' },
	{ label: 'DE', code: 'de' },
	{ label: 'FR', code: 'fr' }
]
const languagesProvider = new CFlatClientDataProvider()
languagesProvider.setData(languages)

KCompositeInput(label="Example Label" 
	v-model:selectionValue="lang"
	v-model:modelValue="data"
	:dataProvider="languagesProvider"
	labelField="label"
	valueField="code"
)

// Each selection item carries its own inputConfig
const contactTypes = [
	{ label: 'Email', code: 'email', inputConfig: { type: 'textbox', inputType: 'email', placeholder: 'user@example.com' } },
	{ label: 'Phone', code: 'phone', inputConfig: { type: 'maskedtextbox', mask: '+99 (999) 999-9999', placeholder: '+1 (555) 000-0000' } },
	{ label: 'Credit Card', code: 'cc', inputConfig: { type: 'maskedtextbox', mask: '9999 9999 9999 9999', placeholder: '0000 0000 0000 0000' } }
]
const contactTypesProvider = new CFlatClientDataProvider()
contactTypesProvider.setData(contactTypes)

const contactValidation = computed(() => {
	if (contactType.value === 'email' && contactValue.value) {
		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
		return emailRegex.test(contactValue.value) ? 'success' : 'error'
	}
	if (contactType.value === 'phone' && !contactValue.value) {
		return 'warning'
	}
	return null
})

const contactValidationText = computed(() => {
	if (contactValidation.value === 'error') return 'Invalid email format'
	if (contactValidation.value === 'warning') return 'Phone number recommended'
	return ''
})

KCompositeInput(
	v-model:selectionValue="contactType"
	v-model:inputValue="contactValue"
	v-model:modelValue="contactData"
	:dataProvider="contactTypesProvider"
	labelField="label"
	valueField="code"
	placeholder="Type"
	:validation="contactValidation"
	:validationText="contactValidationText"
)

// Each country defines its own city list via inputDataProvider
const countries = [
	{ label: 'Turkey', code: 'tr', inputConfig: { type: 'combobox', inputDataProvider: turkishCitiesDP, inputLabelField: 'name', inputSearchbox: true } },
	{ label: 'Germany', code: 'de', inputConfig: { type: 'combobox', inputDataProvider: germanCitiesDP, inputLabelField: 'name', inputSearchbox: true } }
]
const countriesProvider = new CFlatClientDataProvider()
countriesProvider.setData(countries)

KCompositeInput(
	v-model:selectionValue="countrySelection"
	v-model:inputValue="cityInput"
	v-model:modelValue="cascadeData"
	:dataProvider="countriesProvider"
	labelField="label"
	valueField="code"
)

const fruitsProvider = new CFlatClientDataProvider()
fruitsProvider.setData(fruitsArray)

KCompositeInput(
	:dataProvider="fruitsProvider"
	labelField="name"
	valueField="id"
	searchbox
)

KCompositeInput(
	v-model:selectionValue="rightSelection"
	v-model:inputValue="rightInput"
	v-model:modelValue="rightData"
	:dataProvider="languagesProvider"
	selectionSide="right"
	labelField="label"
	valueField="code"
	placeholder="Lang"
)

const regions = [
	{ label: 'US', code: 'us', inputConfig: { inputFormat: 'MM/DD/YYYY' } },
	{ label: 'GB', code: 'gb', inputConfig: { inputFormat: 'DD/MM/YYYY' } }
]
const regionsProvider = new CFlatClientDataProvider()
regionsProvider.setData(regions)

KCompositeInput(
	v-model:selectionValue="dateSelection"
	v-model:inputValue="dateInput"
	v-model:modelValue="dateData"
	:dataProvider="regionsProvider"
	type="datepicker"
	labelField="label"
	valueField="code"
	showClear
	singleValue
)

KCompositeInput(
	v-model:selectionValue="areaSelection"
	v-model:inputValue="areaInput"
	v-model:modelValue="areaData"
	:dataProvider="languagesProvider"
	type="textarea"
	labelField="label"
	valueField="code"
)

KCompositeInput(
	:validation="state"
	:validationText="message"
	:dataProvider="languagesProvider"
)