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

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

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