ivyforms / frontend / src / views / public / fields / WebsiteFormField.vue

WebsiteFormField.vue in The Innovative Form Builder – IvyForms 0.7, at frontend/src/views/public/fields/WebsiteFormField.vue

126 lines 3.2 KB

Raw Download Zip

1	<template>
2	<div
3	:class="[
4	'ivyforms-field ivyforms-field__website',
5	'ivyforms-field__website_' + field.id,
6	field.cssClasses,
7	]"
8	>
9	<IvyFormItem
10	:label="field.hideLabel ? '' : field.label"
11	:required="field.required"
12	:error="error"
13	:prop="field.type + '_' + field.fieldIndex"
14	:show-info="!!field.description"
15	:info-text="field.description \|\| ''"
16	:show-info-icon="false"
17	:label-position="field.labelPosition"
18	>
19	<IvyTextInput
20	:id="fieldID"
21	v-model="localModelValue"
22	class="ivyforms-field__website-input"
23	type="text"
24	:aria-label="field.label"
25	:placeholder="field.placeholder"
26	:disabled="disabled"
27	:readonly="field.readOnly"
28	:required="field.required"
29	:maxlength="field.limitMaxLength ? field.maxLength : undefined"
30	>
31	<template v-if="field.inputPrefix" #prefix>
32	<span class="ivyforms-field__website-prefix">{{ field.inputPrefix }}</span>
33	</template>
34	<template v-if="field.inputSuffix" #suffix>
35	<span class="ivyforms-field__website-suffix">{{ field.inputSuffix }}</span>
36	</template>
37	</IvyTextInput>
38	</IvyFormItem>
39	</div>
40	</template>
41
42	<script setup lang="ts">
43	import { computed, inject } from 'vue'
44
45	interface Field {
46	id: number
47	formId: number
48	fieldIndex: number
49	type: string
50	label: string
51	placeholder?: string
52	required?: boolean
53	hideLabel?: boolean
54	readOnly?: boolean
55	description?: string
56	cssClasses?: string
57	limitMaxLength?: boolean
58	maxLength?: number
59	labelPosition?: string
60	noDuplicates?: boolean
61	inputPrefix?: string
62	inputSuffix?: string
63	// Any other field properties from your data
64	}
65	interface FieldProps {
66	modelValue: string \| number \| null \| undefined
67	field: Field
68	disabled?: boolean
69	error?: string
70	}
71
72	const props = withDefaults(defineProps<FieldProps>(), {
73	modelValue: '',
74	disabled: false,
75	error: '',
76	})
77
78	const emit = defineEmits(['update:modelValue'])
79
80	// Inject clearFieldError function from parent
81	const clearFieldError = inject<(fieldKey: string) => void>('clearFieldError', () => {})
82
83	// Generate field key for clearing errors
84	const fieldKey = computed(() => {
85	return props.field.type + '_' + props.field.fieldIndex
86	})
87
88	// Handle input event to clear errors when user starts typing
89	const handleInput = (value: string \| number \| null \| undefined) => {
90	emit('update:modelValue', value)
91	clearFieldError(fieldKey.value)
92	}
93
94	const localModelValue = computed({
95	get() {
96	return props.modelValue
97	},
98	set(value) {
99	handleInput(value)
100	},
101	})
102	// Generate unique field ID as a string
103	const fieldID = computed(() => {
104	return `ivyforms-field__website-input_${props.field.formId \|\| ''}_${props.field.fieldIndex \|\| ''}`
105	})
106	</script>
107
108	<style scoped>
109	.ivyforms-field__website-prefix,
110	.ivyforms-field__website-suffix {
111	display: inline-block;
112	padding: 0 8px;
113	font-size: 14px;
114	line-height: 40px;
115	color: var(--map-base-text-0);
116	}
117
118	.ivyforms-field__website-prefix {
119	border-right: 1px solid var(--map-base-dusk-stroke--2);
120	}
121
122	.ivyforms-field__website-suffix {
123	border-left: 1px solid var(--map-base-dusk-stroke--2);
124	}
125	</style>
126