[DEV] refactoring

Author: webdevnerdstuff

src/plugin/components/fields/VSFColorField/VSFColorField.vue

@@ -28,9 +28,10 @@
 <script lang="ts" setup>
 import type { VSFColorFieldProps } from './index';
 import type { FieldLabelProps } from '../../shared/FieldLabel.vue';
+import VColorField from '@wdns/vuetify-color-field';
+import FieldLabel from '../../shared/FieldLabel.vue';
 import { useBindingSettings } from '../../../composables/bindings';
 import { useOnActions } from '../../../composables/validation';
-import FieldLabel from '../../shared/FieldLabel.vue';
 import { Field } from 'vee-validate';;
 
 

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

@@ -0,0 +1,78 @@
+<template>
+	<Field
+		v-slot="{ errorMessage, validate }"
+		v-model="modelValue"
+		:name="field.name"
+		:validate-on-model-update="false"
+	>
+		<component
+			:is="component"
+			v-model="modelValue"
+			v-bind="boundSettings"
+			:error="errorMessage ? errorMessage?.length > 0 : false"
+			:error-messages="errorMessage"
+			:items="fieldItems"
+			@blur="onActions(validate, 'blur')"
+			@change="onActions(validate, 'change')"
+			@input="onActions(validate, 'input')"
+		>
+			<template #label>
+				<FieldLabel
+					:label="field.label"
+					:required="fieldRequired"
+				/>
+			</template>
+		</component>
+	</Field>
+
+	<!-- Vuetify Field {{ field }} -->
+</template>
+
+
+<script lang="ts" setup>
+import type { VuetifyFieldProps } from './index';
+import type { FieldLabelProps } from '../../shared/FieldLabel.vue';
+import { useBindingSettings } from '../../../composables/bindings';
+import { useOnActions } from '../../../composables/validation';
+import FieldLabel from '../../shared/FieldLabel.vue';
+import { Field } from 'vee-validate';
+
+
+const emit = defineEmits(['validate']);
+const modelValue = defineModel<any>();
+const props = defineProps<VuetifyFieldProps>();
+
+const { field, settings } = props;
+
+const fieldRequired = computed(() => {
+	const hasRequiredRule = field.rules?.find((rule) => rule.type === 'required');
+	return field.required || hasRequiredRule as FieldLabelProps['required'];
+});
+
+
+// ------------------------- Validate On Actions //
+async function onActions(validate: FieldValidateResult, action: ValidateAction): Promise<void> {
+	useOnActions({
+		action,
+		emit,
+		field,
+		settingsValidateOn: settings.validateOn,
+		validate,
+	});
+}
+
+const fieldItems = computed(() => field?.items ? field.items as any : undefined);
+
+// -------------------------------------------------- Bound Settings //
+const bindSettings = computed(() => ({
+	...field,
+	color: field.color || settings?.color,
+	density: field.density || settings?.density,
+	hideDetails: field.hideDetails || settings?.hideDetails,
+	variant: field.variant || settings?.variant,
+}));
+
+const boundSettings = computed(() => useBindingSettings(bindSettings.value));
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,30 @@
+import type {
+	Field,
+	GlobalChips,
+	GlobalClosableChips,
+	GlobalCloseText,
+	GlobalMultiple,
+	GlobalVariant,
+	SharedProps,
+} from '@/plugin/types';
+import type VuetifyField from './VuetifyField.vue';
+
+
+interface InternalField extends Omit<Field,
+	'inline' | 'inlineSpacing' | 'labelPositionLeft'
+> {
+	chips?: GlobalChips;
+	closableChips?: GlobalClosableChips;
+	closeText?: GlobalCloseText;
+	multiple?: GlobalMultiple;
+	variant?: GlobalVariant;
+}
+
+export interface VuetifyFieldProps extends SharedProps {
+	field: InternalField;
+	component: string;
+}
+
+export type VuetifyField = InstanceType<typeof VuetifyField>;
+
+export default VuetifyField;

src/plugin/components/fields/index.ts

@@ -10,6 +10,7 @@ import VSFSelect from './VSFSelect/VSFSelect.vue';
 import VSFSwitch from './VSFSwitch/VSFSwitch.vue';
 import VSFTextarea from './VSFTextarea/VSFTextarea.vue';
 import VSFTextField from './VSFTextField/VSFTextField.vue';
+import VuetifyField from './VuetifyField/VuetifyField.vue';
 
 export {
 	VSFAutocomplete,
@@ -24,4 +25,5 @@ export {
 	VSFSwitch,
 	VSFTextarea,
 	VSFTextField,
+	VuetifyField,
 };

src/plugin/components/shared/PageContainer.vue

@@ -68,13 +68,13 @@
 					@validate="onValidate"
 				/>
 
-				<Fields.VSFAutocomplete
+				<!-- <Fields.VSFAutocomplete
 					v-if="field.type === 'autocomplete'"
 					v-model="modelValue[field.name]"
 					:field="field"
 					:settings="settings"
 					@validate="onValidate"
-				/>
+				/> -->
 
 				<Fields.VSFCombobox
 					v-if="field.type === 'combobox'"
@@ -93,41 +93,55 @@
 					@validate="onValidate"
 				/>
 
-				<!-- ================================================== Text Field -->
-				<Fields.VSFTextField
-					v-if="field.type === 'text' || field.type === 'textField' || field.type === 'number' || field.type === 'email' || field.type === 'password' || field.type === 'tel' || field.type === 'url'"
+				<!-- ========================= Color Field -->
+				<Fields.VSFColorField
+					v-if="field.type === 'color'"
 					v-model="modelValue[field.name]"
 					:field="field"
 					:settings="settings"
 					@validate="onValidate"
 				/>
 
-				<!-- ========================= Color Field -->
-				<Fields.VSFColorField
-					v-if="field.type === 'color'"
+
+				<!-- ! ================================================== Vuetify Field -->
+				<Fields.VuetifyField
+					v-if="getComponent(field.type) != null"
 					v-model="modelValue[field.name]"
+					:component="getComponent(field.type)"
 					:field="field"
 					:settings="settings"
 					@validate="onValidate"
 				/>
+				<!-- ! ================================================== Vuetify Field -->
+
+				<!-- ================================================== Text Field -->
+				<!-- <Fields.VSFTextField
+					v-if="field.type === 'text' || field.type === 'textField' || field.type === 'number' || field.type === 'email' || field.type === 'password' || field.type === 'tel' || field.type === 'url'"
+					v-model="modelValue[field.name]"
+					:field="field"
+					:settings="settings"
+					@validate="onValidate"
+				/> -->
+
+
 
 				<!-- ========================= File Input -->
-				<Fields.VSFFileInput
+				<!-- <Fields.VSFFileInput
 					v-if="field.type === 'file'"
 					v-model="modelValue[field.name]"
 					:field="field"
 					:settings="settings"
 					@validate="onValidate"
-				/>
+				/> -->
 
 				<!-- ================================================== Textarea -->
-				<Fields.VSFTextarea
+				<!-- <Fields.VSFTextarea
 					v-if="field.type === 'textarea'"
 					v-model="modelValue[field.name]"
 					:field="field"
 					:settings="settings"
 					@validate="onValidate"
-				/>
+				/> -->
 
 				<!-- ================================================== Custom Field -->
 				<template v-if="field.type === 'custom'">
@@ -174,6 +188,13 @@ import type {
 	Page,
 	Settings,
 } from '../../types/index';
+import {
+	VAutocomplete,
+	VFileInput,
+	VSelect,
+	VTextarea,
+	VTextField,
+} from 'vuetify/components';
 
 
 export interface FieldLabelProps {
@@ -187,6 +208,42 @@ const slots = defineSlots();
 const { page } = defineProps<FieldLabelProps>();
 
 
+const textFields = [
+	'text',
+	'textField',
+	'number',
+	'email',
+	'password',
+	'tel',
+	'url',
+];
+
+function getComponent(fieldType: string): any {
+	if (fieldType === 'autocomplete') {
+		return markRaw(VAutocomplete);
+	}
+
+	if (fieldType === 'file') {
+		return markRaw(VFileInput);
+	}
+
+	if (fieldType === 'select') {
+		return markRaw(VSelect);
+	}
+
+	if (fieldType === 'textarea') {
+		return markRaw(VTextarea);
+	}
+
+	if (textFields.includes(fieldType)) {
+		return markRaw(VTextField);
+	}
+
+
+	return null;
+}
+
+
 const modelValue = defineModel<any>();
 
 function onValidate(field: Field): void {