[DEV] testing and fixing props

Author: webdevnerdstuff

src/plugin/components/fields/VSFCheckbox/VSFCheckbox.vue

@@ -48,6 +48,7 @@
 			</v-label>
 
 			<div
+				:id="field?.id"
 				:class="{
 					'v-selection-control-group': !field.inline,
 				}"
@@ -62,8 +63,9 @@
 					:validate-on-model-update="false"
 				>
 					<v-checkbox
-						v-model="modelValue"
 						v-bind="boundSettings"
+						:id="option.id"
+						v-model="modelValue"
 						:error="errorMessage ? errorMessage?.length > 0 : false"
 						:error-messages="errorMessage"
 						:label="option.label"

src/plugin/components/fields/VSFRadio/VSFRadio.vue

@@ -19,7 +19,10 @@
 				/>
 			</v-label>
 
-			<div :style="checkboxContainerStyle">
+			<div
+				:id="field?.groupId"
+				:style="checkboxContainerStyle"
+			>
 				<v-radio-group
 					v-model="modelValue"
 					:append-icon="field?.appendIcon"
@@ -45,7 +48,8 @@
 					>
 						<v-radio
 							v-bind="boundSettings"
-							:error="errorMessage ? errorMessage?.length > 0 : false"
+							:id="undefined"
+							:error="hasErrors"
 							:error-messages="errorMessage"
 							:label="option.label"
 							:style="radioStyle"

src/plugin/components/fields/VSFRadio/index.ts

@@ -11,6 +11,7 @@ export interface RadioGroupProps {
 	error?: VRadioGroup['error'];
 	errorMessages?: VRadioGroup['errorMessages'];
 	hideDetails?: VRadioGroup['hideDetails'];
+	groupId?: VRadioGroup['id'];
 	maxErrors?: VRadioGroup['maxErrors'];
 	maxWidth?: VRadioGroup['maxWidth'];
 	minWidth?: VRadioGroup['minWidth'];

src/plugin/components/fields/VuetifyField/VuetifyField.vue

@@ -9,8 +9,8 @@
 			:is="component"
 			v-model="modelValue"
 			v-bind="boundSettings"
-			:error="errorMessage ? errorMessage?.length > 0 : false"
-			:error-messages="errorMessage"
+			:error="hasErrors"
+			:error-messages="errorMessage || field.errorMessages"
 			:items="fieldItems"
 			@blur="onActions(validate, 'blur')"
 			@change="onActions(validate, 'change')"
@@ -62,13 +62,28 @@ async function onActions(validate: FieldValidateResult, action: ValidateAction):
 }
 
 const fieldItems = computed(() => field?.items ? field.items as any : undefined);
+const fieldType = computed(() => {
+	if (field.type === 'color') {
+		return 'text';
+	}
+
+	return field.type;
+});
+const hasErrors = computed(() => {
+	let err = field?.error;
+
+	err = field?.errorMessages ? field.errorMessages.length > 0 : err;
+
+	return err;
+});
 
 // -------------------------------------------------- Bound Settings //
 const bindSettings = computed(() => ({
 	...field,
 	color: field.color || settings?.color,
 	density: field.density || settings?.density,
 	hideDetails: field.hideDetails || settings?.hideDetails,
+	type: fieldType.value,
 	variant: field.variant || settings?.variant,
 }));
 

src/plugin/components/shared/PageContainer.vue

@@ -60,13 +60,13 @@
 				/>
 
 				<!-- ================================================== Select -->
-				<Fields.VSFSelect
+				<!-- <Fields.VSFSelect
 					v-if="field.type === 'select'"
 					v-model="modelValue[field.name]"
 					:field="field"
 					:settings="settings"
 					@validate="onValidate"
-				/>
+				/> -->
 
 				<!-- <Fields.VSFAutocomplete
 					v-if="field.type === 'autocomplete'"
@@ -76,13 +76,13 @@
 					@validate="onValidate"
 				/> -->
 
-				<Fields.VSFCombobox
+				<!-- <Fields.VSFCombobox
 					v-if="field.type === 'combobox'"
 					v-model="modelValue[field.name]"
 					:field="field"
 					:settings="settings"
 					@validate="onValidate"
-				/>
+				/> -->
 
 				<!-- ================================================== Switch -->
 				<Fields.VSFSwitch
@@ -94,13 +94,13 @@
 				/>
 
 				<!-- ========================= Color Field -->
-				<Fields.VSFColorField
+				<!-- <Fields.VSFColorField
 					v-if="field.type === 'color'"
 					v-model="modelValue[field.name]"
 					:field="field"
 					:settings="settings"
 					@validate="onValidate"
-				/>
+				/> -->
 
 
 				<!-- ! ================================================== Vuetify Field -->
@@ -190,11 +190,13 @@ import type {
 } from '../../types/index';
 import {
 	VAutocomplete,
+	VCombobox,
 	VFileInput,
 	VSelect,
 	VTextarea,
 	VTextField,
 } from 'vuetify/components';
+import { VColorField } from '@wdns/vuetify-color-field';
 
 
 export interface FieldLabelProps {
@@ -223,6 +225,14 @@ function getComponent(fieldType: string): any {
 		return markRaw(VAutocomplete);
 	}
 
+	if (fieldType === 'color') {
+		return markRaw(VColorField);
+	}
+
+	if (fieldType === 'combobox') {
+		return markRaw(VCombobox);
+	}
+
 	if (fieldType === 'file') {
 		return markRaw(VFileInput);
 	}

src/plugin/types/index.ts

@@ -124,8 +124,10 @@ export interface Field {
 	density?: Props['density'];
 	disabled?: boolean | ((value: any) => boolean);
 	error?: boolean;
+	errorMessages?: string | string[];
 	hideDetails?: GlobalHideDetails;
 	hidden?: boolean;
+	id?: string;
 	items?: readonly any[] | undefined;
 	label?: string;
 	name: string;