v6 update

resources/scripts/admin/components/custom-fields/CreateCustomFieldsSingle.vue

@@ -0,0 +1,72 @@
+<template>
+  <BaseInputGroup
+    :label="field.label"
+    :required="field.is_required ? true : false"
+    :error="v$.value.$error && v$.value.$errors[0].$message"
+  >
+    <component
+      :is="getTypeComponent"
+      v-model="field.value"
+      :options="field.options"
+      :invalid="v$.value.$error"
+      :placeholder="field.placeholder"
+    />
+  </BaseInputGroup>
+</template>
+
+<script setup>
+import { defineAsyncComponent, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { helpers, requiredIf } from '@vuelidate/validators'
+import useVuelidate from '@vuelidate/core'
+
+const props = defineProps({
+  field: {
+    type: Object,
+    required: true,
+  },
+  customFieldScope: {
+    type: String,
+    required: true,
+  },
+  index: {
+    type: Number,
+    required: true,
+  },
+  store: {
+    type: Object,
+    required: true,
+  },
+  storeProp: {
+    type: String,
+    required: true,
+  },
+})
+
+const { t } = useI18n()
+
+const rules = {
+  value: {
+    required: helpers.withMessage(
+      t('validation.required'),
+      requiredIf(props.field.is_required)
+    ),
+  },
+}
+
+const v$ = useVuelidate(
+  rules,
+  computed(() => props.field),
+  { $scope: props.customFieldScope }
+)
+
+const getTypeComponent = computed(() => {
+  if (props.field.type) {
+    return defineAsyncComponent(() =>
+      import(`./types/${props.field.type}Type.vue`)
+    )
+  }
+
+  return false
+})
+</script>